Create OXCell

src/components/OXCell.vue

+<template>
+  <div @click="clickCell">{{ player }}</div>
+</template>
+<script>
+export default {
+  props: ['player', 'row', 'col'],
+  methods: {
+    clickCell (event) {
+      console.log(event)
+      console.log('click ' + this.row + ' ' + this.col)
+      this.$emit('cell-click', this.row, this.col)
+    }
+  }
+}
+</script>
+<style></style>

src/components/OXTable.vue

 <template>
   <div>
     <table>
-      <tr>
-        <td>-</td>
-        <td>-</td>
-        <td>-</td>
-      </tr>
-      <tr>
-        <td>-</td>
-        <td>-</td>
-        <td>-</td>
-      </tr>
-      <tr>
-        <td>-</td>
-        <td>-</td>
-        <td>-</td>
+      <tr v-for="(line, lineId) in table" :key="lineId">
+        <td v-for="(item, itemId) in line" :key="itemId">
+          <OXCell :player="item" :row="lineId" :col="itemId" @cell-click="cellClick" />
+        </td>
       </tr>
     </table>
   </div>
 </template>
 <script>
-export default {}
+import OXCell from './OXCell.vue'
+export default {
+  data () {
+    return {
+      turn: 'O',
+      table: [
+        ['-', '-', '-'],
+        ['-', '-', '-'],
+        ['-', '-', '-']
+      ]
+    }
+  },
+  methods: {
+    cellClick (row, col) {
+      console.log('Cell click ' + row + ' ' + col)
+      this.table[row][col] = this.turn
+    }
+  },
+  components: {
+    OXCell
+  }
+}
 </script>
 <style></style>