> For the complete documentation index, see [llms.txt](https://learnmagento.gitbook.io/vuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnmagento.gitbook.io/vuejs/vue-js-3-tutorial-09-dao-quanh-composition-api-trong-vue-ok.md).

# Vue JS 3 Tutorial 09  Dạo quanh Composition API trong Vue (ok)

<figure><img src="https://2312674349-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MeXbfPqPP3ZSJVavefR%2Fuploads%2F1orBEUSwOO2mOO8THZOr%2FScreenshot_2.png?alt=media&amp;token=664e6094-1503-4d63-9c47-5af86c3f4e5c" alt=""><figcaption></figcaption></figure>

C:\Users\Administrator\Desktop\vue3\src\views\AboutView\.vue

```javascript
<template>
  <div class="about">
    <h1>This is an about page 1 {{ FirstName }}</h1>
    <h2>This is an about page 2 {{ car.name }}</h2>
    <h3>This is an about page 3 {{ car.price }}</h3>
    <h4>This is an about page 4 {{ obj.key }}</h4>
    <button @click="changFirstName">changFirstName</button>
  </div>
</template>
<script>
import { reactive, ref } from "vue";
export default {
  setup() {
    let FirstName = ref("First");
    let car = reactive({
      name: "Car",
      price: 5000
    });
    let obj = ref({
      'key' : 'Test object'
    })
    function changFirstName() {
      car.name = "Car Test";
      obj._value.key = "GGGGGGGG 🤣";
      this.FirstName = "Abc";
    }
    return {
      FirstName,
      car,
      obj,
      changFirstName
    }
  }
}
</script>

```