Компонент 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();
        }
      }
    }
  );

};