"prueba" es una matriz de objetos en mis datos vue

var vue = new Vue({
  el: '#content',

  data: {
    test: [
      {
        array: [0, 0, 0, 0]
      },
      {
        array: [0, 0, 0, 0]
      }
    ],
    number: 0
  },

  methods: {   
    setNumber: function(){
      this.number = 5;
    },

    setArray: function(){
      this.test[0].array[0] = 9;
    }
  }
})

El problema es que si cambio el valor de un elemento en "matriz", mientras que el registro muestra que el valor ha cambiado, no se actualiza en la página. Por otro lado, si cambio el valor de "número", se actualizan tanto el valor de "número" como el de "matriz" en la página.

<section id="content">
  <div>Value in array: {{ test[0].array[0] }}</div>
  <div>Value in number: {{ number }}</div>
  <!-- {{ setNumber() }} -->
  {{ setArray() }}
</section>

<!-- Loading Vue.js -->
<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>

¿Cómo puedo hacer que mi página responda a la actualización de "matriz"?
Aquí está el JsFiddle:https://jsfiddle.net/zcbh4esr/