syntax highlight working

assets/js/components/tabs/TabContent.vue

@@ -1,5 +1,8 @@
 <template lang="html">
-	<div v-show="title == selectedTitle">
+	<div
+		v-show="title === selectedTitle"
+		class="tab-content"
+	>
 		<slot/>
 	</div>
 </template>
@@ -16,10 +19,16 @@ export default {
 	},
 	setup() {
 		const selectedTitle = inject('selectedTitle')
-
 		return {
 			selectedTitle
 		}
 	}
 }
 </script>
+
+<style>
+.tab-content {
+	padding: 20px;
+	border-radius: 5px;
+}
+</style>

assets/js/components/tabs/TabWrapper.vue

@@ -5,7 +5,7 @@
 				v-for="title in tabTitles"
 				:key="title"
 				:class="{ selected: title === selectedTitle }"
-				@click="selectedTitle = title"
+				@click="handleClick(title)"
 			>
 				{{ title }}
 			</li>
@@ -30,11 +30,11 @@ export default {
 			tabTitles
 		}
 	},
-	data: () => ({
-		selectedIndex: 0,
-		tabs: []
-	}),
-	created() {
+	methods: {
+		handleClick(title) {
+			this.selectedTitle = title
+			this.$emit('tabActivated', title)
+		}
 	},
 }
 </script>