在vue中使用element-ui时， SyntaxError: export declarations may only appear at top level of a module

这是我调用的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 先引入vue.js -->
        <script src="node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    </head>
    <body>
        <div id="app">
            <template>
              <el-checkbox-group 
                v-model="checkedCities1"
                :min="1"
                :max="2">
                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
              </el-checkbox-group>
            </template>
        </div>

        <script type="text/javascript">
            const cityOptions = ['上海', '北京', '广州', '深圳'];
            export default {
              data() {
                return {
                  checkedCities1: ['上海', '北京'],
                  cities: cityOptions
                };
              }
            };
            new Vue({
                el:'#app',
                data:{

                }
            })
        </script>
    </body>
</html>

这是element-ui官方的模板:
图片说明

请问：我写的方式不对吗

示例代码应该是写一个单独的模块用，你把export中的内容沾到vue 的data下，然后把export删掉，你这里不需要export给其他文件用