如何将外部javascript插入Vue组件

我试图在Vue组件中插入一个自定义JavaScript和一个sketcher，但到目前为止运气不好。当我尝试将javascript直接插入模板时，如下所示：

<template>
    <div id="sketcher">
        var sketcher = new ChemDoodle.SketcherCanvas('sketcher', 400, 300);
    </div>
</template>

Home.vue

<template>
    <div id="sketcher">
       <app-sketcher></app-sketcher>
    </div>
</template>

<script>
import sketcher from './sketcher';    
export default {
    components: {
    "app-sketcher": sketcher
    }
}
</script>

---

但我得到了这个错误：未能装载组件：未定义模板或渲染函数。如果您能就如何修复此问题或提出将javascript嵌入Vue组件的其他选项提出建议，我将不胜感激。

您的第一条错误消息是不言自明的：您不能在单个Vue组件的文件中放置标记

在第二个示例中，在Home.vue文件中注册app sketcher组件时，您没有为其定义模板。您的sketcher.js文件只导出挂载钩子的定义，而不导出其他内容

可以创建Sketcher.vue文件：

---

感谢您的帮助，但在执行您的建议后，我出现了此错误：[Vue warn]：挂载钩子中的错误：TypeError:c未定义在-->中的src/components/Sketcher.Vue中的src/components/Home.Vue中的src/App.Vue中您不应该出现此错误。您的Sketcher.vue文件是否与我的示例完全相同？如果不是，您可能在该文件的挂载钩子中的某个地方有语法错误。我发现了我的错误，除了导入行中缺少“.vue”之外，您的代码工作得很好。非常感谢。草图显示在页面上，但不幸的是它被安装在页面底部。检查后，我发现草图被插入下面。你知道为什么会这样吗？

<template>
    <div id="sketcher">
       <app-sketcher></app-sketcher>
    </div>
</template>

<script>
import sketcher from './sketcher';    
export default {
    components: {
    "app-sketcher": sketcher
    }
}
</script>

<template>
  <div id="sketcher"></div>
</template>

<script>
export default {
  mounted() {    
    return new ChemDoodle.SketcherCanvas('sketcher', 400, 300)
  }
}
</script>

<template>
  <app-sketcher/>
</template>

<script>
import AppSketcher from './Sketcher';    
export default {
  components: { AppSketcher }
}
</script>