Adding a new component within a component issues

Hi all,

So I'm trying to follow this process: https://spark.laravel.com/docs/1.0/forms to define a form in Spark. I've created a new file under js/components that looks like this:

Vue.component('form-new', {
    props: ['user'],

    data() {
        return {
            form: new SparkForm({
                name: '',
                age: ''
            })
        };
    },

    methods: {
        register() {
            Spark.post('/', this.form)
                .then(response => {
                console.log(response);
        });
        }
    }
});

The corresponding component looks like this:

<form-new>
    <form class="add-store">
    </form>
</form-new>

This is loaded as a partial within the default spark blade 'home.blade.php' template. The issue I am having is that when the page loads, I get the following error:

Unknown custom element: <form-new> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I'm trying to pinpoint exactly what I've missed out here, or if I've put things in the wrong places. Any help here would be much appreciated.

Thanks! :)