What in Vue?
Let's us introduce a bit of how we'll tackle building the app and how to track our progress.

First of all, the core concepts are as below:
👨‍🎤Template syntax
📰Reactivity fundamentals
🦾computed properties
🔥Class bindings
⚛️conditional rendering
📂list rendering
💞event handling
🚀form input handling
🧬lifecycle hooks
🔥watchers
⚛️template refs
📂component basics
💞props
🚀component v-model
🧬compossables
🧬slots
🧬provide/inject
🧬async components
Building the app comes first and then we say which concept has been used. That way it's easier to understand how to use that particular concept. The confirmation of a used concept will be
👨‍🎤slots ✅
A bit on a Vue app
Every Vue application starts by creating a new application instance with the createApp function, as seen in the main.ts in our code boilerplate.
The object passed to createApp, App, is in fact a root component that will be mounted to a div having the id #app.
This div is in the index.html file in the root of our project folder.

Let's implement a simple Vue component instance that increments a counter value using the cdn approach instead of the cli.
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<body>
   <div id="app">
      <span>Counter: {{counter}}</span>
      <div @click="increaseCounter"
       class="border border-gray-400 bg-gray-200 
       p-2 rounded inline-flex">Increase</div>
   </div>
</body>
<script>
// Option API
const { createApp } = Vue
createApp({
    data() {
      return {
        counter: 0
     }
    },
    methods: {
      increaseCounter() {
        this.counter ++
      }
    }
}).mount('#app')
</script>
Or, using the setup() option, the script part of our app translates to this
// ...
<script>
// Composition API
const { ref, createApp } = Vue
createApp({
    setup () {
    const counter = ref(0)
    const increaseCounter = () => {
        counter.value += 2
    }

    return {
        counter,
        increaseCounter
    }
    }
    
}).mount('#app')
</script>
Skimming through what's going on, the vue cdn link loads the global build of Vue, where all top-level APIs are exposed as properties on the global Vue object.
We extract properties, ref and createApp, for use in our html app.
As you have known by now, the object wrapped by createApp, is a component reactive instance that will be mounted in #app.

The "Mustache" syntax (double curly braces) allows us to declaratively bind the rendered DOM to the underlying component instance's data, in this case, counter is bound to the rendered DOM.
👨‍🎤Template syntax ✅
In option API, we define all methods within methods property, in composition API, methods are defined as normal, without constraints.

Note: When not using build step, such as using cdn, we need to expose states and methods via setup(), in Vue CLI, we don't need to do so. ref() is used to create a data attribute that is reactive and can hold any type, as opposed to reactive() itself, which can only hold object types. ref() takes the data argument and returns it wrapped within a ref object with a .value property. We access it using .value within script, in DOM, we can access it directly.
import { ref, reactive } from 'vue'

const count = ref(0)
const state = reactive({ count : 0 })

function increment() {
  state.count++
  count.value++
}

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1
📰Reactivity fundamentals ✅