browserify parse error on Vue file

I am struggling to register a custom Vue component in Spark 3.0 (just upgraded, but was having the same issue before):

C:\Users\Mike\code\StoryBuilder\resources\assets\js\components\Scene.vue:3
<template>
^
ParseError: Unexpected token

I am registering my vue like so in app.js

require('spark-bootstrap');
require('./components/bootstrap');

import Scene from './components/Scene.vue';
Vue.component('scene', Scene);

var app = new Vue({
    mixins: [require('spark')]
});

I tried: Vue.component('scene', require('./components/Scene.vue')); instead of importing the component originally with the same result.

I tried deleting my node modules directory and re-ran NPM install because I saw to do that in another thread, no luck.

I haven't changed the gulpfile from the default, the elixer function looks like this:

elixir(function(mix) {
    mix.less('app.less')
       .browserify('app.js', null, null, { paths: 'vendor/laravel/spark/resources/assets/js' })
       .copy('node_modules/sweetalert/dist/sweetalert.min.js', 'public/js/sweetalert.min.js')
       .copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css');
});

my package.json looks like this:

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {    
    "bootstrap": "^3.0.0",
    "jquery": "^2.1.4",
    "js-cookie": "^2.1.0",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "moment": "^2.10.6",
    "promise": "^7.1.1",
    "sweetalert": "^1.1.3",
    "underscore": "^1.8.3",
    "urijs": "^1.17.0",
    "vue": "~2.0.1",
    "vue-resource": "~1.0.1"
  }
}

any ideas?