Array.shift() resulting in incorrect rerendering in Ractive.js

gistfile1.txt

<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
<script type='text/template' id='template'>
  <div class='attribute' data-a="{{#a}}{{.}}{{/a}}"></div> <!--shift is buggy here-->
  <div class='innerHTML'> {{#a}}{{.}}{{/a}}</div> <!--shift() works fine here-->
  
  <br/> Does the attribute equal the innerHTML : <span class='doesTheAttributeEqualTheInnerHTML'></span>
  <br/> Actual Attribute : <span class='actualAttributeValue'></span>
  <br/> Expected Attribute : <span class='expectedAttributeValue'></span>
</script>

<div id='container'></div> 

<script>  

  data = { 
    a : [1,2,3]
  }
  
  ractive = new Ractive({
    el : document.querySelector('#container'),
    template : document.querySelector('#template').innerHTML,
    data : data
  })
   
  setTimeout(function() {
    
    data.a.shift() //here's the issue
    
    setTimeout(function () {
      ractive.find('.doesTheAttributeEqualTheInnerHTML').innerHTML = (ractive.find('.attribute').attributes.getNamedItem('data-a').value === ractive.find('.innerHTML').innerHTML);
      ractive.find('.actualAttributeValue').innerHTML = ractive.find('.attribute').attributes.getNamedItem('data-a').value
      ractive.find('.expectedAttributeValue').innerHTML = ractive.find('.innerHTML').innerHTML
    })
    
  },1000)
  
</script>