How to change my Vue 3 Options API code to Composition API-CodePudding

Original Question: Code to initialize the contents of the form How can I use options api grammar, which is the code below, as composition api grammar?

I'm using the following code in a form. How would I update it from Vue's Options API to the Composition API.

    data: {
        text: ""
    },
    methods:{
        resetForm: function(e) {
            e.preventDefault()
            this.$data.text = ""
        }
    }

CodePudding user response：

<script setup>
import { ref } from 'vue'

const text = ref('');
const resetForm = () => {
  text.value = '';
}
</script>

<template>
  <p>Text is: {{ text }}</p>
    <input v-model="text" placeholder="edit me" />
  <button @click="resetForm">
    Reset Form
  </button>
</template>

Or if you're doing separate files

export default {
  setup() {
    const text = ref('');
    const resetForm = () => {
      text.value = '';
    };

    return { text, resetForm };
  }
}