adicoonado compoente de dataehora

src/playground/App.vue

@@ -7,6 +7,7 @@
       <v-tab value="indicador">Indicador</v-tab>
       <v-tab value="cartao">Cartão</v-tab>
       <v-tab value="campo">Campo</v-tab>
+      <v-tab value="data_hora">Data e hora</v-tab>
       <v-tab value="ola_mundo">Demo</v-tab>
     </v-tabs>
 
@@ -16,6 +17,7 @@
     <IndicadorPlayground v-else-if="aba === 'indicador'" />
     <CartaoPlayground v-else-if="aba === 'cartao'" />
     <CampoPlayground v-else-if="aba === 'campo'" />
+    <DataHoraPlayground v-else-if="aba === 'data_hora'" />
     <OlaMundoPlayground v-else />
   </v-container>
 </template>
@@ -26,6 +28,7 @@ import BotaoPlayground from "./botao.playground.vue";
 import IndicadorPlayground from "./indicador.playground.vue";
 import CartaoPlayground from "./cartao.playground.vue";
 import CampoPlayground from "./campo.playground.vue";
+import DataHoraPlayground from "./data_hora.playground.vue";
 import OlaMundoPlayground from "./ola_mundo.playground.vue";
 
 export default defineComponent({
@@ -35,11 +38,18 @@ export default defineComponent({
     IndicadorPlayground,
     CartaoPlayground,
     CampoPlayground,
+    DataHoraPlayground,
     OlaMundoPlayground,
   },
   data() {
     return {
-      aba: "botao" as "botao" | "indicador" | "cartao" | "campo" | "ola_mundo",
+      aba: "botao" as
+        | "botao"
+        | "indicador"
+        | "cartao"
+        | "campo"
+        | "data_hora"
+        | "ola_mundo",
     };
   }
 })