vue2 如何实现将dom元素转移到指定节点

<script>
	export default {
		name: 'teleport',
		props: {
			/* 移动至哪个标签内，最好使用id */
			to: {
				type: String,
				required: true
			}
		},

		mounted() {
			document.querySelector(this.to).appendChild(this.$el)
		},

		destroyed() {
			document.querySelector(this.to).removeChild(this.$el)
		},

		render() {
			return <div>{this.$scopedSlots.default()}</div>
		}
	}
</script>

<template>
  <div class="logisticsInfo">
    <div class="title-box">
      <teleport to="#header__center"> <img src="https://www.cnblogs.com/mengqc1995/assets/logisticsInfoImgs/bg-title.png"
             alt=""
             class="bg-box"></teleport>

    </div>
  </div>
</template>
<script>
import teleport from './components/teleport.vue'
export default {
  name: 'QsMallWebLogisticsInfo',
  components: {
    teleport,
  },
  data() {
    return {}
  },

  mounted() {},

  methods: {},
}
</script>
<style lang="scss" scoped>
.logisticsInfo {
  .title-box {
  }
}
</style>
<style lang="scss">
#header__center {
  .bg-box {
    height: 458px;
    width: 100%;
  }
}
</style>

<div id="header__center"></div>
   <div class="main">
     <router-view ref="mallPage"></router-view>
   </div>