title: Aurelia observer not firing for array
body: <p>I have a custom data grid element simplified like this:</p>
  
  <pre><code>export class DataGrid {
  
    @bindable data;
  
    dataChanged(newValue, oldValue) {
      console.log("Sensing new data...", newValue);
    }
  }
  </code></pre>
  
  <p>It's instantiated like this:</p>
  
  <pre><code>&lt;data-grid data.bind="records"&gt;&lt;/data-grid&gt;
  </code></pre>
  
  <p><em>"Sensing new data..."</em> and the array of records is displayed in the console when the data grid appears.  However, when I delete a record from the array of objects, the <code>dataChanged()</code> function is not triggered.</p>
  
  <pre><code>let index = this.records.findIndex((r) =&gt; { return r.acc_id === this.record.acc_id; });
  if (index &gt; -1) {
    console.log("Deleting element..." + index, this.records);
    this.records.splice(index, 1);
  }
  </code></pre>
  
  <p>I get <em>"Deleting element..."</em> in the console but not <em>"Sensing new data..."</em>.</p>
  
  <p>Any ideas why <code>dataChanged()</code> is not firing when I splice out a record?</p>