fix: use two words component name

test/__snapshots__/component.test.ts.snap

@@ -1,3 +1,3 @@
 // Vitest Snapshot v1
 
-exports[`Counter.vue > should render 1`] = `"<div>10 <button class=\\"inc\\"> + </button><button class=\\"dec\\"> - </button></div>"`;
+exports[`TheCounter.vue > should render 1`] = `"<div>10 <button class=\\"inc\\"> + </button><button class=\\"dec\\"> - </button></div>"`;

test/component.test.ts

@@ -1,16 +1,16 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import Counter from '../src/components/Counter.vue'
+import TheCounter from '../src/components/TheCounter.vue'
 
-describe('Counter.vue', () => {
+describe('TheCounter.vue', () => {
   it('should render', () => {
-    const wrapper = mount(Counter, { props: { initial: 10 } })
+    const wrapper = mount(TheCounter, { props: { initial: 10 } })
     expect(wrapper.text()).toContain('10')
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should be interactive', async () => {
-    const wrapper = mount(Counter, { props: { initial: 0 } })
+    const wrapper = mount(TheCounter, { props: { initial: 0 } })
     expect(wrapper.text()).toContain('0')
 
     expect(wrapper.find('.inc').exists()).toBe(true)