How can I use this in Vue 2 single file components?

True, after trying quite some time to make a working example in Nuxt I couldn't succeed.

This is what I tried

<template>
  <div style="display: flex">
    <scroll-sync :vertical="true">
      <div
        style="width: 100px; height: 600px; overflow: auto; background: teal"
      >
        Nam id faucibus turpis. Sed in ex gravida lorem tincidunt posuere. Cras
        id velit ac diam pretium cursus. Aliquam sagittis magna non ante
        vehicula, ac venenatis leo consequat. Fusce blandit, enim sit amet
        scelerisque lobortis, neque ex cursus velit, sed sodales urna nibh
        tempor urna. Aliquam erat volutpat. Nam sit amet arcu at mauris
        fringilla accumsan sit amet ac mi. Mauris consectetur est ligula, eu
        tristique nibh sollicitudin in. Sed malesuada neque ut ante ultrices
        malesuada. Curabitur imperdiet neque quis est sodales, id pellentesque
        nibh eleifend. Maecenas cursus, nibh vitae congue accumsan, nisl lectus
        pharetra dolor, a ornare diam purus at metus. Vestibulum porta, quam
        eget venenatis hendrerit, massa tortor faucibus arcu, ac pellentesque
        felis mi et quam. Etiam sollicitudin pretium diam, at fringilla velit
        gravida ut. Vestibulum a felis at sapien rutrum fringilla. Donec eu
        viverra enim. Etiam consectetur elit non nibh ornare blandit. Curabitur
        ultrices ante quis ipsum efficitur sodales. Sed porttitor lorem vitae
        ipsum volutpat eleifend. Cras libero nisl, porta sit amet maximus ac,
        finibus id risus.
      </div>
    </scroll-sync>
    <scroll-sync :vertical="true">
      <div style="width: 100px; height: 300px; overflow: auto; background: red">
        Nam id faucibus turpis. Sed in ex gravida lorem tincidunt posuere. Cras
        id velit ac diam pretium cursus. Aliquam sagittis magna non ante
        vehicula, ac venenatis leo consequat. Fusce blandit, enim sit amet s
        nibh eleifend. Maecenas cursus, nibh vitae congue accumsan, nisl lectus
        pharetra dolor, a ornare diam purus at metus. Vestibulum porta, quam
        eget venenatis hendrerit, massa tortor faucibus arcu, ac pellentesque
        felis mi et quam. Etiam sollicitudin pretium diam, at fringilla velit
        gravida ut. Vestibulum a felis at sapien rutrum fringilla. Donec eu
        viverra enim. Etiam consectetur elit non nibh ornare blandit. Curabitur
        ultrices ante quis ipsum efficitur sodales. Sed porttitor lorem vitae
        ipsum volutpat eleifend. Cras libero nisl, porta sit amet maximus ac,
        finibus id risus.
      </div>
    </scroll-sync>
  </div>
</template>

<script>
export default {
  components: {
    [process.client && 'ScrollSync']: () => import('vue-scroll-sync'),
  },
}
</script>

Looks fine devtools wise but totally not working.

PS: I've also tried with a plugin of course, but no change so far.

Not sure why it does work in Storybook tho, looks quite the same to me. Maybe it's because I'm using a MacOS trackpad? Not sure... 🤔

metawin-m / vue-scroll-sync

How can I use this in Vue 2 single file components? #3