How to use ref, or watch, or similar functionalities in Vue Composition API

Question

I want to know how can I use ref or watch in setup() area of Vue 3 when importing vue through a CDN.

Here's the code:

<div id="app">

    {{ counter }}

  </div>

<script src="https://unpkg.com/vue@next"></script>

const app = Vue.createApp({
  props: {
    name: String
  },
  setup(){
    const capacity = ref(3)
  },
  data(){
    return {
      counter: 43
    }
  },
})

This throws an error

ref is not defined

Answer 1

To import ref try:

const { createApp, ref, computed, watch } = Vue;

You need to return variables from setup as object like this

const app = createApp({
  props: {
    name: String
  },
  setup(){
    const capacity = ref(3)
    return { capacity };
  },
  /* data(){  // NO NEED
    return {
      counter: 43
    }
  }, */
})