在页面加载后插入页面时，Vue组件未初始化

Question

在页面完全加载后，我试图将vue组件插入页面。

当htlm已经在页面上时，该组件可以正常工作。

这是包含组件的刀片：

<div id="widget{{ $item->getId() }}">

<input type="hidden" name="settings[{{ $item->getId() }}][keep]" value="1" />

<fieldset class="widget-pod">

    <legend class="title-legend visuallyhidden">Image</legend>

    <imageupload
        width="{{ $width }}"
        height="{{ $height }}"
        input-name="settings[{{$item->getId()}}][image]"
        path="{{ $item->downloadRoute('content_id') }}"
        alt="{{ $settings->get('image_alt') }}">
    </imageupload>

</fieldset>

</div>

这是将其添加到页面中的javascript函数：

this.add = function(element, callback) {

var naturalHeight = $(element).height();

$(element)
  .css('height', 0)
  .css('max-height', '999999px')
  .css('min-height', 0)
  .animate({
      height: naturalHeight + 'px'
    },
    this.getDuration() * 1000,
    function() {
      removeHeightAndSetMarginAndPadding($(element));

      //if the natural height changes throughout the animation, some javascipt happened so let's just animate it again
      if ($(element).height() !== naturalHeight) {
        var newNaturalHeight = $(element).height();
        $(element)
          .css('height', naturalHeight)
          .animate({
              height: newNaturalHeight + 'px'
            },
            (self.getDuration() / 2 * 1000),
            function() {
              if ($.isFunction(callback)) {
                callback();
              }
            }
          );

      } else {
        if ($.isFunction(callback)) {
          callback();
        }
      }
    }
  );

};