vue.jsの単一ファイルコンポーネント内でモジュールのimport、exportを行いたい。

Question

前提・実現したいこと

vue.jsの単一ファイルコンポーネント内でモジュールのimport、exportを行いたい。

発生している問題・エラーメッセージ

単一ファイルコンポーネント内のscriptタグ内でimport、exportを行うとビルド時に以下のようなメッセージが出力される。

 'import' and 'export' may only appear at the top level (10:0)

該当のソースコード

{
  "name": "kensyo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "buildA": "browserify ./src/index.js -o ./dist/index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.0",
    "jquery": "^3.4.1",
    "vue.js": "^0.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "babelify": "^10.0.0",
    "browserify": "^16.5.0",
    "vueify": "^9.4.1"
  },
  "browserify": {
    "transform": [
      "babelify",
      "vueify"
    ]
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ],
    "plugins": [
      "@babel/plugin-transform-runtime"
    ]
  }
}

import Vue from 'vue'
import index from './components/indexComponent.vue'

new Vue({

	el: '#app',
	render: h => h(index),
})

<template>
	<div>
		{{message}}
	</div>
</template>

<script>
//module.exports = {
export default {

	data : function() {

		return {

			message: 'Hello,Vue.js!'
		}
    }
}
</script>

試したこと

export defaultをmodule.exportsに書き換えるとビルドは正常終了する。

補足情報（FW/ツールのバージョンなど）

上記のnpm-scriptsに記載

Answer 1

書き方がnpmを使用しない書式と混ざっているので前提が変なのですが，

まずは
$ vue create <app name>
で雛形を作成した方が良いと思います．
また，コンポーネントの利用方法はjs内でのロードではなく，

<template>
  <Subcomponent />
</template>

<script>
import SubComponent from './components/Subcomponent'
</script>

となります．