Fix: Tab & Tabs

docs/.vuepress/components/Tab.vue

@@ -15,23 +15,23 @@ import Vue from "vue";
 export default Vue.extend({
   props: {
     title: {
-      type: String
+      type: String,
-    }
+    },
   },
   data() {
     return {
       tabID: "",
-      labelID: ""
+      labelID: "",
     };
   },
   beforeMount() {
-    let tag =
+    let tag = "tab-" + Math.random().toString(36).substring(2);
-      "tab-" +
-      Math.random()
-        .toString(36)
-        .substring(2);
     this.tabID = tag;
     this.labelID = tag + "-" + "label";
-  }
+
+    // Since Vue 3.0, we have no access to $children.
+    // So we need another approach to register our child components.
+    this.$parent.$data.children.push(this);
+  },
 });
 </script>

docs/.vuepress/components/Tabs.vue

@@ -29,32 +29,32 @@ import Vue from "vue";
 export default Vue.extend({
   props: {
     title: {
-      type: String
+      type: String,
-    }
+    },
   },
   data() {
     return {
-      children: []
+      children: [],
     };
   },
   created() {
-    this.children = this.$children;
+    this.children = [];
   },
   mounted() {
-    this.$nextTick(function() {
+    this.$nextTick(function () {
       const bootstrap = require("bootstrap");
       let triggerEl = document.getElementById(this.children["0"].$data.labelID);
       new bootstrap.Tab(triggerEl).show();
     });
   },
   computed: {
-    tag: function() {
+    tag: function () {
       return "tabs-" + this.title;
     },
-    contentTag: function() {
+    contentTag: function () {
       return "tabs-" + this.title + "-content";
-    }
+    },
-  }
+  },
 });
 </script>