Composition API upgrade

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vue/composition-api": "^0.2.1",
     "core-js": "^2.6.5",
     "material-design-icons-iconfont": "^5.0.1",
     "vue": "^2.6.10",

src/components/PetList.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { value, computed } from "vue-function-api";
+import { ref, computed } from "@vue/composition-api";
 import PetListV2 from "./PetListV2";
 import PetListV3 from "./PetListV3";
 
@@ -43,8 +43,9 @@ export default {
         PetListV3,
     },
     setup() {
-        const v3 = value(true);
+        const v3 = ref(true);
         const toggleLabel = computed(() => {
+
             if (v3.value) {
                 return "Vue 3 function api";
             }

src/components/PetListV3.vue

@@ -12,44 +12,36 @@
         </v-flex>
 
         <v-list-item>
-            <h2>{{numberOfPetsString}}</h2>
+            <h2>{{petList.numberOfPetsString}}</h2>
         </v-list-item>
-        <v-list-item v-for="(pet, index) in pets" :key="index">
+        <v-list-item v-for="(pet, index) in petList.pets" :key="index">
             <v-btn @click="setChosenPet(pet)">{{pet}}</v-btn>
         </v-list-item>
         <v-list-item>{{praisedPetString}}</v-list-item>
     </v-card>
 </template>
 
 <script>
-import { value, computed } from "vue-function-api";
+import { computed, ref, reactive } from "@vue/composition-api";
 
 export default {
     setup() {
         // Pet list
-        const pets = value([
-            "Bark Twain",
-            "Chairman Meow",
-            "Christopher Squawken"
-        ]);
-
-        const numberOfPets = computed(() => {
-            return pets.value.length;
-        });
-
-        const numberOfPetsString = computed(() => {
-            return `${numberOfPets.value} pets.`
+        const petList = reactive({
+            pets: ["Bark Twain", "Chairman Meow", "Christopher Squawken"],
+            numberOfPets: computed(() => petList.pets.length),
+            numberOfPetsString: computed(() => `${petList.numberOfPets} pets.`)
         })
 
         // Pet addition
-        const newPet = value("");
+        let newPet = ref("");
         const addPet = () => {
-            pets.value = [...pets.value, newPet.value];
+            petList.pets = [...petList.pets, newPet.value];
             newPet.value = "";
-        }
+        };
 
         // Pet actions
-        let chosenPet = value("");
+        let chosenPet = ref("");
 
         const setChosenPet = pet => {
             chosenPet.value = pet;
@@ -66,9 +58,7 @@ export default {
         return {
             addPet,
             newPet,
-            numberOfPets,
-            numberOfPetsString,
-            pets,
+            petList,
             praisedPetString,
             setChosenPet
         };

src/components/TodoList.vue

@@ -94,7 +94,7 @@
 
 <script>
 import useTodos from "../hooks/useTodos";
-import { computed } from "vue-function-api";
+import { computed } from '@vue/composition-api'
 
 export default {
     setup() {

src/main.js

@@ -8,7 +8,9 @@ import Vuetify from 'vuetify'
 import 'vuetify/dist/vuetify.min.css'
 import store from './store/index';
 import router from './router/router';
+import VueCompositionApi from '@vue/composition-api';
 
+Vue.use(VueCompositionApi);
 Vue.use(plugin)
 Vue.use(Vuetify)
 Vue.use(Vuex)