（Fullcalendar 4 VueJs）在日历标题中添加自定义元素

请看一下我的方法，并告诉我在Fullcalendar头中添加复杂DOM元素是否是一种好的/正确的方法

   viewSkeletonRender(info){

    this.$refs.fullCalendar.$el.querySelector('.fc-header-toolbar').insertAdjacentHTML('afterbegin', `
      <div class="event_create-wrap">
        <div class="event_create-btn">
          <div class="event_create-btn-left">
            Create
          </div>
          <div class="event_create-dropdown">
            <button class="event_create-btn-dropdown" @click="eventDropdownClicked">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M111 13.8822L3.62734 8.39658C3.23555 8.01742 3.23555 7.40432 3.62734 7.0292L4.5693 6.11762C4.96109 5.73846 5.59462 5.73846 5.98224 6.11762L10.0002 10.006L14.0181 6.11762C14.4099 5.73846 15.0434 5.73846 15.431 6.11762L16.373 7.0292C16.7648 7.40836 16.7648 8.02146 16.373 8.39658L10.7045 13.8822C10.3211 14.2614 9.68756 14.2614 9.29578 13.8822Z" fill="white"/>
              </svg>
            </button>
            <div class="event_create-btn-dropdown-content" :class="{show: isEventListShown}">
              <a href="">1</a>
              <a href="">2</a>
              <a href="">3</a>
            </div>
          </div>
        </div>
      </div>
    `);
  }

viewSkeletonRender（信息）{
此.$refs.fullCalendar.$el.querySelector（'.fc标题工具栏'）。insertAdjacentHTML（'afterbegin'`
创造
`);
}

我正在使用“viewSkeletonRender”钩子，但我不确定使用“insertAdjacentHTML”是否好，因为我是第一次使用它

我不能使用AppendChild，因为我需要在那里添加太多html代码，而且很难一步一步地创建所有html对象（如果我需要添加100个html标记怎么办…）

我不能使用innerHtml，因为它将删除fc标题工具栏中的所有内容

据我所知，我不能用这种方法将任何VueJs道具和方法绑定到此HTML，因为我将此HTML添加为vanila Js

谢谢你的建议