diff --git a/packages/playground/src/components/formated_log.vue b/packages/playground/src/components/formatted_log.vue
similarity index 91%
rename from packages/playground/src/components/formated_log.vue
rename to packages/playground/src/components/formatted_log.vue
index 851b7daaba..770ae11b84 100644
--- a/packages/playground/src/components/formated_log.vue
+++ b/packages/playground/src/components/formatted_log.vue
@@ -1,6 +1,6 @@
 <template>
   <template v-if="Array.isArray(msg)">
-    <FormatedLog v-for="item in msg" :depth="depth + 1" :key="item.id" :msg="item" />
+    <FormattedLog v-for="item in msg" :depth="depth + 1" :key="item.id" :msg="item" />
   </template>
 
   <template v-else-if="msg.type === 'Literal'">
@@ -29,7 +29,7 @@
         <span v-html="msg.type === 'Array' ? '&#91; ' : '&#123; '" />
         <div class="ml-4 d-flex" v-for="([key, item], index) in Object.entries(msg.value)" :key="item.id">
           "{{ key }}":
-          <FormatedLog :depth="depth + 1" :msg="item" :coma="index !== Object.keys(msg.value).length - 1" is-prop />
+          <FormattedLog :depth="depth + 1" :msg="item" :coma="index !== Object.keys(msg.value).length - 1" is-prop />
         </div>
         <span v-html="msg.type === 'Array' ? ' &#93;' : ' &#125;'" /><span v-if="coma" v-text="','" />
       </div>
@@ -50,7 +50,7 @@ export type MsgToken =
   | { id: number; type: "Object"; value: { [key: string]: MsgToken } };
 
 export default {
-  name: "FormatedLog",
+  name: "FormattedLog",
   props: {
     msg: { type: Object as PropType<MsgToken | MsgToken[]>, required: true },
     depth: { type: Number, default: () => 0 },
diff --git a/packages/playground/src/components/tf_log_formatter.vue b/packages/playground/src/components/tf_log_formatter.vue
index 789c026ddb..4b881e19ec 100644
--- a/packages/playground/src/components/tf_log_formatter.vue
+++ b/packages/playground/src/components/tf_log_formatter.vue
@@ -1,11 +1,11 @@
 <template>
-  <FormatedLog :msg="parsedMsg" />
+  <FormattedLog :msg="parsedMsg" />
 </template>
 
 <script lang="ts">
 import { computed, type PropType, toRef } from "vue";
 
-import FormatedLog, { type MsgToken } from "./formated_log.vue";
+import FormattedLog, { type MsgToken } from "./formatted_log.vue";
 
 function parseMsg(msg?: any): MsgToken[] {
   const _msg = msg || "";
@@ -78,7 +78,7 @@ function parseObject(idRef: { id: number }, obj: any): MsgToken {
 
 export default {
   name: "TfLogFormatter",
-  components: { FormatedLog },
+  components: { FormattedLog },
   props: {
     msg: { type: String as PropType<string | undefined | null>, required: true },
   },