<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="sudoku-demo" class="demo">

  <strong>Lazy Sudoku</strong>

  <p>Keep hitting the shuffle button until you win.</p>

  <button @click="shuffle">

    Shuffle

  </button>

  <transition-group name="cell" tag="div" class="sudoku-container">

    <div v-for="cell in cells" :key="cell.id" class="cell">

      {{ cell.number }}

    </div>

  </transition-group>

</div>

<script>

new Vue({

  el: '#sudoku-demo',

  data: {

    cells: Array.apply(null, { length: 81 })

      .map(function (_, index) {

        return {

          id: index,