refactor(sfc-playground): add vapor name

Author: sxzz

packages/sfc-playground/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/svg" href="/logo.svg" />
-    <title>Vue SFC Playground</title>
+    <title>Vue Vapor SFC Playground</title>
     <script>
        const savedPreferDark = localStorage.getItem('vue-sfc-playground-prefer-dark')
        if (

packages/sfc-playground/src/Header.vue

@@ -68,7 +68,7 @@ function toggleDark() {
   <nav>
     <h1>
       <img alt="logo" src="/logo.svg" />
-      <span>Vue SFC Playground</span>
+      <span>Vue Vapor SFC Playground</span>
     </h1>
     <div class="links">
       <VersionSelect

packages/sfc-playground/src/welcome.vue

@@ -1,12 +1,15 @@
-<script setup>
+<script setup lang="ts">
 import { ref, getCurrentInstance } from 'vue'
 
 const msg = ref('Hello World!')
+// @ts-expect-error
 const isVapor = getCurrentInstance().vapor
 </script>
 
 <template>
   <h1>{{ msg }}</h1>
+  <p>
+    VAPOR <b>{{ isVapor ? 'ON' : 'OFF' }}</b>
+  </p>
   <input v-model="msg" />
-  <b>VAPOR {{ isVapor ? 'ON' : 'OFF' }}</b>
 </template>