<template>
    <div class="auth">
        <el-form :model="form" :rules="rules2" ref="form">
            <div class="panfish">
                <img :src="imgurl" :class="topimg"/>
            </div>
            <div class="panel">
                <h1 class="title">Sign IN</h1>
                <div class="input-group">
                    <div class="input-box">
                        <el-form-item prop="username">
                            <el-input type="text" v-model="form.username" auto-complete="off" placeholder="账号" @focus="username()" @blur="none()"></el-input>
                        </el-form-item>
                    </div>
                    <div class="input-box">
                        <el-form-item prop="password">
                            <el-input type="password" v-model="form.password" auto-complete="off" placeholder="密码" @focus="password()" @blur="none()"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <el-button type="primary" class="btn" v-loading="loading" @click.native.prevent="handleSubmit2('form')">登录</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
  export default {
    components: {
      'remote-js': {
        render(createElement) {
          return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
        },
      props: {
        src: { type: String, required: true },
        },
      },
    },
   }
</script>

在网上找到了这个方法引入外部js

<remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js">
</remote-js>

但是现在这个自定义组件放在template里面会报错，放在外面不引用，请问正确的使用姿势是怎样？