Read-only warnings, and 'avoid prop being mutated directly..'

[KimPrince]

Whenever I update anything on my page I get a series of warnings saying that $attrs is readonly, and $listeners is readonly. These errors are found in both the Drag component and the Drop component.

Secondly, if I add any properties to the drag component, I get warnings such as Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "effectAllowed"

<template>
  <tr>
    <td>
      <drop>X</drop>
      <drag>Y</drag>
    </td>
    <td>
      <input type="text" v-model="otherField">
    </td>
  </tr>
</template>

I am using Webpack for the build. Here's how I am importing the component.

import { Drag, Drop } from 'vue-drag-drop';
export default {
    components: {
        Drag,
        Drop
    }
    //....
}

I ran npm update but still receive the same messages. Any ideas? Is it something I have done?

I raised an SO about it earlier, https://stackoverflow.com/questions/51807924/how-to-use-this-vue-drag-and-drop-component#51807924

I am using Vuex, which may have some consequences.

[cameronhimself]

Hm, I don't see any particular reason this would be happening. Can you share an entire code example? I'd like to help, but it's difficult to figure anything out from an incomplete snippet.

[cameronhimself]

Feel free to reopen if you need more help.