renamed component

src/App.vue

@@ -12,7 +12,7 @@
                     <v-btn :to="{ name: 'notes'}" text>Notes</v-btn>
                     <v-btn :to="{ name: 'petlist'}" text>Pet List</v-btn>
                     <v-btn :to="{ name: 'width'}" text>Width</v-btn>
-                    <v-btn :to="{ name: 'props'}" text>Props</v-btn>
+                    <v-btn :to="{ name: 'cities'}" text>Cities</v-btn>
                 </v-toolbar-items>
             </v-toolbar>
         </div>

src/components/Cities.vue

@@ -0,0 +1,61 @@
+<template>
+    <v-app>
+        <v-content>
+            <v-container>
+                <v-alert type="success">
+                    <p>
+                        <strong>Cities</strong> demonstrates how props can be consumed by the setup method. It can be passed as simply as <code>setup(props)</code> but best practices dictate that object destructuring be used instead: <code>setup({ city })</code>.
+                    </p>
+                </v-alert>
+
+                <v-card class="mx-auto" max-width="400" tile>
+                    <v-list-item three-line v-for="city in data.cities" :key="city.id">
+                        <cities-item :city="city" />
+                    </v-list-item>
+                </v-card>
+            </v-container>
+        </v-content>
+    </v-app>
+</template>
+
+<script>
+import { reactive } from "@vue/composition-api";
+import CitiesItem from "./CitiesItem";
+
+export default {
+    components: {
+        CitiesItem
+    },
+    setup() {
+        const data = reactive({
+            cities: [
+                {
+                    id: 1,
+                    name: "Barcelona",
+                    country: "Spain",
+                    visited: true
+                },
+                {
+                    id: 2,
+                    name: "Berlin",
+                    country: "Germany",
+                    visited: true
+                },
+                {
+                    id: 3,
+                    name: "Addis Ababa",
+                    country: "Ethiopia",
+                    visited: false
+                }
+            ]
+        });
+
+        return {
+            data
+        };
+    }
+};
+</script>
+
+<style>
+</style>

src/components/PropsChild.vue → src/components/CitiesItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-list-item-content>
+    <v-list-item-content ref="city-item">
         <v-list-item-title>City: {{name}}</v-list-item-title>
         <v-list-item-subtitle>Country: {{country}}</v-list-item-subtitle>
         <v-list-item-subtitle>{{visitedString}}</v-list-item-subtitle>

src/components/TodoList.vue

@@ -5,7 +5,7 @@
                 <v-container>
                     <v-alert type="success">
                         <p>
-                            <strong>Todo list</strong> demonstrates the usage of hooks to import data that is relevant to this file. There is a todo hook, <code>useTodos</code> text="useTodos" />, which encapsulate all the logic that we would want to use with our Todo component, and exports it to this Todo component.
+                            <strong>Todo list</strong> demonstrates the usage of hooks to import data that is relevant to this file. There is a todo hook, <code>useTodos</code>, which encapsulate all the logic that we would want to use with our Todo component, and exports it to this Todo component.
                         </p>
 
                         <p>

src/router/router.js

@@ -4,7 +4,7 @@ import TodoList from '../components/TodoList.vue'
 import Notes from '../components/Notes.vue'
 import PetList from '../components/PetList.vue'
 import Width from '../components/Width.vue';
-import Props from '../components/Props.vue';
+import Cities from '../components/Cities.vue';
 
 import VueRouter from 'vue-router'
 
@@ -39,9 +39,9 @@ export default new VueRouter({
             component: Width
         },
         {
-            name: 'props',
-            path: 'props',
-            component: Props
+            name: 'cities',
+            path: 'cities',
+            component: Cities
         }
     ]
 })