【急】引入的外部js函数不能获取vue的document吗？元素为空无法读取问题

Question

【急】业务需求一个日历页面，就找到一个js日历插件尝试导入，结果因为对vue引入js不了解折腾了两天出了各种各样的问题，求大佬们帮帮忙。报错如下：（Uncaught TypeError: Cannot read property 'style' of null）报错代码位置已经在代码中标注。因为注释掉报错位置1的这行代码报错位置2的那行又会报错，个人分析是document没有获取到，请问是这个原因吗？怎么解决？

报错的位置是引入的js文件，部分代码如下：
【simple-calendar-es6.js】

class SimpleCalendar {
  //构造函数
  constructor(query, options) {
    //默认配置
    this._defaultOptions = {
      width: '500px',
      height: '500px',
      ...
    }

    //容器
    this.container = document.querySelector(query);
//报错位置1---------------------------
    this._defaultOptions.width = this.container.style.offsetWidth;
    this._defaultOptions.height = this.container.style.offsetHeight;

    //this._options = Object.assign({}, this._defaultOptions, options);

    //得到最终配置
    this._options = this.optionAssign(this._defaultOptions, options);

    this.create();
  }
  create() {
    var root = this.container;
    //报错位置2----------------------------------------
    root.innerHTML = '<div class="sc-header"> </div> <div class="sc-body"> </div>';
    root.style.width = this._options.width;
    root.style.height = this._options.height;
    ｝

vue代码如下
【content.vue】

<template>
  <div id="content" style="font-family:微软雅黑">
      <br>
      <h4>------------------------------------------------------------------------</h4>

      <link rel="stylesheet" type="text/css" href="http://localhost:8080/src/css/simple-calendar.css">
      <div  id="container"></div>

      <h4>------------------------------------------------------------------------</h4>
  </div>
</template>

<script>
import  SimpleCalendar from '../js/simple-calendar-es6.js'
var myCalendar = new SimpleCalendar('#container');
  alert("测试1");
export default {
  data() {
    return {
      //button:"预定",
    }
  }
}
</script>

<style>
</style>

这是按照插件给的方式来做的

Answer 1

var myCalendar = new SimpleCalendar('#container');放在mounted里面，放在外面此时渲染还没完成，找不到dom

export default {
  data() {
    return {
      //button:"预定",
    }
  }
    mounted:(){
    this.$nextTick(()=>{
     var myCalendar = new SimpleCalendar('#container');
})
    }
}

Answer 2

vue 它内部是有生命周期这一说法 你在引入处直接用 他是没有办法得到你的值
从而无法在虚拟dom 构建 也从而无法在真实DOM挂载