Vue.js: How to update element's position

Question

I want to move an element while scrolling so the element is always in the screen. But the position isn't updated.

What I am doing is this.

<v-card class="item" :style="{ top: distance }">
</v-card>
...
data() {
  return {
    distance: 0,
  }
}
methods: {
  handleScroll() {
    this.distance = window.scrollY
    },
  },
  created() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
}

...

.item {
  position: absolute;
}

How can I do it?

Answer 1

Your element should have an absolute position and add the units as @Nikos mentioned :

  <v-card class="item" style="position:absolute" :style="{ top: distance+'px' }">
  </v-card>