Without multiple sub-components and store variables, everything works

README.md

Without multiple sub-components and store variables, everything works

App.html

<input bind:value='newTodo' placeholder='buy milk'>
<button on:click='push("$todos", newTodo)'>add todo</button>

<ul>
	{{#each ( $todos || [] ) as todo, i}}
		<li>
			<button on:click='splice("$todos", i, 1)'>x</button>
			{{todo}}
		</li>
	{{/each}}
</ul>

<style>
	ul {
		list-style: none;
		padding: 0;
	}
	li button {
		color: rgb(200,0,0);
		background: rgba(200,0,0,0.1);
		border-color: rgba(200,0,0,0.2);
		padding: 0.2em 0.5em;
	}
</style>

<script>
	import { Store } from 'svelte/store.js';
	import { push, splice } from 'svelte-extras';
	
	const store = new Store( {} );
	
	export default {
		data: function () {
			return {
				newTodo: ''
			};
		},
		methods: {
			push,
			splice
		},
		
		store: () => store,
		
		oncreate: function () {
			this.store.set( { todos: [ 'Item 1', 'Item 2', 'Item 3' ] } )
		}
	};
</script>