Using editable machine with Vue's v-model

[goodpixels]

Many thanks for such a great library! It's literally saved me HOURS of work!

However, recently I've stumbled upon a problem: how can I use Zag.js editable machine with the Vue's v-model?

I'm using Nuxt UI input but I cannot make it work. Here's my code:

Form.vue

<script setup>
const name = ref("")
</script>

<template>
  <EditableInput
    v-model="name"
    placeholder="name"
  />
</template>

EditableInput.vue

<script setup>
import * as editable from "@zag-js/editable";
import { normalizeProps, useMachine } from "@zag-js/vue";
const attrs = useAttrs()

const [state, send] = useMachine(editable.machine({ id: "1", value: attrs.modelValue }));

const api = computed(() => editable.connect(state.value, send, normalizeProps));
</script>

<template>
  <div ref="ref" v-bind="api.rootProps">
    <div v-bind="api.areaProps">
      <UInput v-if="api.isEditing" v-bind="api.inputProps" v-model="api.value" />
      <span v-else v-bind="api.previewProps">{{api.value}}</span>
    </div>
    <div>
      <div v-if="api.isEditing">
        <button v-bind="api.submitTriggerProps">Save</button>
        <button v-bind="api.cancelTriggerProps">Cancel</button>
      </div>
      <button v-else v-bind="api.editTriggerProps">Edit</button>
    </div>
  </div>
</template>

I got a feeling like I'm missing something obvious here, but I can't figure out what. Is anyone able to help please?

[goodpixels]

In the end I did this, and it worked:

const [state, send] = useMachine(
  editable.machine({
    id: attrs.id,
    value: attrs.modelValue,
    activationMode: "none",
    onSubmit: ({ value }) => emit("update:modelValue", value),
  }),
)