please send help

frontend/src/components/Hand.vue

 <template>
-    <div class="hand">
-        <tile v-for="tile of this.tiles" :key="tile.id" :id="tile.tile"/>
+    <div class="hand" v-if="this.Hand">
+        <tile v-for="tile of this.Hand.tiles_left" :key="tile.idobject" :id="tile.id_tuile"/>
     </div>
 </template>
 
 <script>
 import Tile from '@/components/Tile.vue';
+import TileModel from '@/model/TileModel.js';
+import Hand from '@/model/HandModel.js';
 
 export default {
     name: 'Hand',
@@ -15,24 +17,26 @@ export default {
     },
     data(){ 
         return{
-        tiles: [
-            {id: 1, tile: 1},
-            {id: 2, tile: 11},
-            {id: 3, tile: 11},
-            {id: 4, tile: 11},
-            {id: 5, tile: 16},
-            {id: 6, tile: 7},
-            {id: 7, tile: 4},
-            {id: 8, tile: 5},
-            {id: 9, tile: 20},
-            {id: 10, tile: 21},
-            {id: 11, tile: 22},
-            {id: 12, tile: 6},
-            {id: 13, tile: 8},
-        ]
+        Hand: new Hand()
         }
     },
     mounted(){
+            this.Hand.draw(new TileModel('0'));
+            /*this.Hand.draw(new TileModel('11'));
+            this.Hand.draw(new TileModel('11'));
+            this.Hand.draw(new TileModel('14'));
+            this.Hand.draw(new TileModel('16'));
+            this.Hand.draw(new TileModel('7'));
+            this.Hand.draw(new TileModel('4'));
+            this.Hand.draw(new TileModel('5'));
+            this.Hand.draw(new TileModel('20'));
+            this.Hand.draw(new TileModel('21'));
+            this.Hand.draw(new TileModel('22'));
+            this.Hand.draw(new TileModel('6'));
+            this.Hand.draw(new TileModel('8'));*/
+        
+    },
+    updated(){
     }
 }
 </script>