up until now I had two boards between which someone could drag 'n drop cards.
Now I want to try out **interact.js** as it sounds like a nice and well maintained library.
As I am using **vue** for my project I am now a bit confused about how to tackle this.

I found this blog post [here](https://itnext.io/swipeable-card-stack-using-vue-js-and-interact-js-f6caa055ecd9) which uses interact.js with swipable cards and tried to fit it to my purpose.
My card component right now looks like this:

```
<template>
  <v-card
    ripple
    class="primary"
    :id = "id"
    ref="interactElement"
  >
    <slot/>
  </v-card>
</template>

<script>
import interact from 'interactjs';

export default {
  props: ['id'],
  mounted() {
    const element = this.$refs.interactElement;
    console.log(element);
    interact(element).draggable({
      onstart: () => {
        console.log('---------start dragging');
      },
      onend: () => {
        console.log('---------end dragging');
      },
    });
  },
};
</script>

<style scoped>
  .v-card {
    height: 7rem;
    width: 7rem;
  }

  .draggable{
    touch-action: none;
    user-select: none;
  }
</style>

```

However my problem right now is that e.g **onstart never triggers**. What am I doing wrong here?

**Also I am wondering if it is better to do it like this or test a wrapper for interact.js in vue like [this one](https://github.com/kimuraz/vue-interact)?** I am not quite sure what such a wrapper would be beneficial for as I am quite new to vue?

Thanks in advance! :)