Field.vue

<template src='./index.html' />

<script src="./index.js" lang="babel"></script>

index.html

<div @keyup.up="goUp" @keyup.down="goDown" @keyup.left="goLeft" @keyup.right="goRight">
  <template v-for="n in size">
    <cell v-for="m in size" :value="abc" :isActive="false"></cell>
  </template>
</div>

index.js

import { mapActions, mapState } from 'vuex'
import * as types from 'store/mutation-types'

import store from 'store/store'
import Cell from './cell/Cell'

const FIELD_SIZE = 4

export default {
  name: 'field',
  components: { Cell },

  data: () => ({
    size: FIELD_SIZE
  }),

  beforeCreate() {
    store.commit(types.INIT_STATE, FIELD_SIZE)
  },

  computed: {
    ...mapState([
      'field'
    ])
  },

  methods: {
    ...mapActions([
      'goUp',
      'goDown',
      'goLeft',
      'goRight'
    ])
  }
}