タブを切り替えた直後のHighChartsのグラフ生成でエラーとなる

タブを切り替えてHighChartsのグラフを表示したい

HighChartsを使用してグラフ表示のシステムを作成しています。
選択するタブによって表示するグラフを切り替えたいのですが、
タブ切り替え後に切り替え先のIDに対してHighChartをNewすると、
エラーとなります。

発生している問題・エラーメッセージ

複数タブを作成し、タブ切り替えと同時にグラフの表示を行おうとすると、
以下のエラーが発生します。

エラーメッセージ
vue.js:634 [Vue warn]: Error in v-on handler: "Error: Highcharts error #13:

具体的には、「該当のソースコード」これを実行すると、以下のようになります。
0. タブ1をクリック⇒グラフ１が表示される。
0. タブ2をクリック⇒エラー
0. タブ2をクリック⇒グラフ２が表示される。
0. タブ1をクリック⇒エラー
0. タブ1をクリック⇒グラフ１が表示される。

おそらく、2,4ではそれぞれのタブの表示に切り替わる前なので、
表示先のID（cont1, cont2)がなく、Newでエラーになるのだと思いますが、
どのように対応してよいかわかりません。

該当のソースコード

html
1<html>
2 <head>
3  <title>PHP Test</title>
4
5  <style module>
6
7  ul{
8    margin: 0;
9    padding: 0;
10  }
11  li{
12    list-style: none;
13  }
14  .tabs {
15    overflow: hidden;
16  }
17  .tabs li,
18  .tabs label {
19    float: left;
20    padding: 10px 20px;
21    border: 1px solid #ccc;
22    cursor: pointer;
23    transition: .3s;
24  }
25  .tabs li:not(:first-child),
26  .tabs label:not(:first-of-type) {
27    border-left: none;
28  }
29  .tabs li.active,
30  .tabs :checked + label {
31    background-color: #000;
32    border-color: #000;
33    color: #fff;
34    cursor: auto;
35  }
36  .contents{
37    overflow: hidden;
38    margin-top: -1px;
39  }
40  .contents li {
41    width: 600px;
42    height: 500px;
43    padding: 20px;
44    border: 1px solid #ccc;
45  }
46
47  .jquery .contents li{
48    display: none;
49  }
50  .jquery .contents li.active {
51    display: block;
52  }
53  .vue_radio input{
54    display: none;
55  }
56</style>
57
58</head>
59<body>
60<div id="app">
61 
62 @{{title}}
63<div>
64
65<div class="vue">
66      <ul class="tabs">
67        <li v-on:click="change('1')" v-bind:class="{'active': isActive === '1'}">タブ1</li>
68        <li v-on:click="change('2')" v-bind:class="{'active': isActive === '2'}">タブ2</li>
69        <li v-on:click="change('3')" v-bind:class="{'active': isActive === '3'}">タブ3</li>
70      </ul>
71
72      <ul class="contents">
73        <li v-if="isActive === '1'">
74          test1
75          <div id='cont1'></div>
76        </li>
77        <li v-else-if="isActive === '2'">
78          test2
79          <div id='cont2'></div>
80        </li>
81        <li v-else-if="isActive === '3'">test3</li>
82      </ul>
83    </div>
84  </div>
85
86</div>
87
88<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
89<script type="text/javascript" src="./highcharts.js"></script>
90
91
92<script type="text/javascript">
93var chart1;
94var chart2;
95 var app = new Vue({
96  el: '#app',
97  data: {
98    title: 'タブテスト',
99    isActive : '1',
100  },
101  methods: {
102    change:function(num){
103      this.isActive = num;
104      if(num == '1') {
105        this.show_chart1();
106      }
107      if( num == '2'  ) {
108        this.show_chart2();
109      }
110    },
111    show_chart1: function(){
112
113      // グラフオプションを指定
114      var options = {
115        // 出力先を指定
116        chart :{renderTo : 'cont1'},
117        title :{text : 'グラフ１'},
118        // データ系列を作成
119        series: [{name: "pi", data: [3,1,4,1,5]}]
120      };
121      // グラフを作成
122      chart1 = new Highcharts.Chart(options);
123    },
124    show_chart2 : function() {
125      // グラフオプションを指定
126      var options = {
127        // 出力先を指定
128        chart :{renderTo : 'cont2'},
129        title :{text : 'グラフ２'},
130        // データ系列を作成
131        series: [{name: "pi", data: [13,1,4,1,5]}]
132      };
133
134      // グラフを作成
135      chart2 = new Highcharts.Chart(options);
136    },
137  },
138})
139
140</script>
141
142</body>
143</html>
144