fix: add support for watching arrays

examples/index.html

@@ -26,6 +26,19 @@
             <p x-text="$store.colorScheme"></p>
         </div>
 
+        <div x-data>
+            <input type="text" x-model="$store.todo.new">
+            <button @click="$store.todo.add($store.todo.new)">
+                Add Todo
+            </button>
+
+            <ul>
+                <template x-for="todo in $store.todo.todos">
+                    <li x-text="todo"></li>
+                </template>
+            </ul>
+        </div>
+
         <script src="../dist/spruce.umd.js"></script>
 
         <script>
@@ -45,6 +58,14 @@
 
             Spruce.store('colorScheme', 'light', true)
 
+            Spruce.store('todo', {
+                new: '',
+                todos: [],
+                add(todo) {
+                    this.todos.push(todo)
+                }
+            })
+
             Spruce.watch('application.name', () => {
                 Spruce.store('persisted').example = 'World';
             });
@@ -60,6 +81,10 @@
             Spruce.started(function () {
                 console.log('started...')
             })
+
+            Spruce.watch('todo.todos', function () {
+                console.log('Added todo')
+            })
         </script>
     </body>
 </html>

src/index.js

@@ -141,6 +141,8 @@ const Spruce = {
     },
 
     runWatchers(stores, target, key, value) {
+        key = target['__key_name'] || key
+
         const self = this
 
         if (self.watchers[key]) {

src/observable.js

@@ -3,6 +3,7 @@ import { isNullOrUndefined, isObject, isArray } from './utils'
 export const createObservable = (target, callbacks) => {
     Object.entries(target).forEach(([key, value]) => {
         if (! isNullOrUndefined(value) && (isObject(value) || isArray(value))) {
+            value['__key_name'] = key
             target[key] = createObservable(value, callbacks)
         }
     })