In Vue 2, the data() option in the Options API returns an object with your component’s state, like a simple count value.

export default {  data() {

    return {

      count: 0

    }

  }

}

Reactive Data in the Vue 3 Composition API

In Vue 3’s Composition API, there’s no data() function. Instead, you define reactive state inside the setup() function using ref() or reactive().

Example: ref()

<script setup>import { ref } from ‘vue’

 

const count = ref(0)

</script>

 

<template>

  <button @click=”count++”>Clicked {{ count }} times</button>

</template>

Example: reactive()

<script setup>import { reactive } from ‘vue’

 

const state = reactive({

  count: 0,

  name: ‘Vue 3’

})

</script>

 

<template>

  <button @click=”state.count++”>

    Clicked {{ state.count }} times

  </button>

  <p>{{ state.name }}</p>

</template>

Also Read:

Key Takeaway

  • In the Vue 3 Composition API, there is no data() function.
  • Use ref() for primitive values, and for any value you might fully replace later (primitive or complex).
  • Use reactive() for objects or arrays when you mostly update their properties directly.

Related Resources