Dynamic add target class not make component moveable

Environments

• Framework name: Vue
• Framework version: 3.2.33
• Moveable Component version: vue-3moveable 0.10.4
• Testable Address(optional): https://codesandbox.io/s/keen-volhard-hou32e?file=/src/App.vue

Description

Have simple draft of moveable in vue. Page have 2 buttons, first button onclick add class ‘target’ to second button by vue data. I’m expect that after add class ‘target’, button should be moveable. What is wrong?

Possible after add class to element, i should call some moveable method to start work?

<div>
  <button @click="btnClick">Add target class</button>
</div>
<component
  :is="'SimpleButton'"
  :class="className"
  @mousedown="mousedown"
/>
<Moveable
  ref="moveable"
  :target="target"
  :draggable="true"
  @drag="onDrag"
/>

data() {
  return {
    target: [".target"],
    className: "test-class",
    draggable: true,
  };
},
...
btnClick(e) {
    this.className = "target";
  },

[daybrush]

@actorius

moveable’s new version is released.

updateSelectors is missing. try again

[actorius]

Ok, looks better. It’s should be used with nextTick, otherwise element setting moveable only on second click.

 btnClick(e) {
      this.className = "target";
      this.$nextTick(() => {
        this.$refs.moveable.updateSelectors();
      });
    },

Sandbox updated: Updated