Vue 3 Essentials - Setup & reactive references

SetupExample.vue

<template>
  <div>Capacity: {{ capacity }}</div>
</template>

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

export default {
  setup() {
    const capacity = ref(3); // Ref is used to wrap a primitive (number) inside of a reactive reference (object)
    
    return { capacity }; // Expose to template
  },
};
</script>

SetupWithProps.vue

<script>
import { watch } from 'vue';

export default {
  props: {
    name: String,
  },
  setup(props) {
    watch(() => {
      console.log(props.name);
    });
  },
};
</script>

SimpleExample.vue

<template>
  <div>Capacity: {{ capacity }}</div>
</template>

<script>
export default {
  data() {
    return {
      capacity: 3,
    };
  },
};
</script>