refactor(packages/vue): add counter on mounted for useRenderCount

packages/vue/src/composables/useRenderCount/index.test.ts

@@ -19,20 +19,20 @@ describe('useRenderCount', () => {
         const component = mount(ComponentStub);
         
         // Initial render
-        expect(component.vm.count).toBe(0);
+        expect(component.vm.count).toBe(1);
 
         component.vm.hiddenCount = 1;
         await nextTick();
         
         // Will not trigger a render
-        expect(component.vm.count).toBe(0);
+        expect(component.vm.count).toBe(1);
         expect(component.text()).toBe('0');
 
         component.vm.visibleCount++;
         await nextTick();
 
         // Will trigger a render
-        expect(component.vm.count).toBe(1);
+        expect(component.vm.count).toBe(2);
         expect(component.text()).toBe('1');
 
         component.vm.visibleCount++;
@@ -40,7 +40,7 @@ describe('useRenderCount', () => {
         await nextTick();
 
         // Will trigger a single render for both updates
-        expect(component.vm.count).toBe(2);
+        expect(component.vm.count).toBe(3);
         expect(component.text()).toBe('3');
     });
 
@@ -50,7 +50,7 @@ describe('useRenderCount', () => {
 
         const count = useRenderCount(instance);
 
-        // Initial render
+        // Initial render (should be zero because the component has already rendered on mount)
         expect(count.value).toBe(0);
 
         component.vm.hiddenCount = 1;

packages/vue/src/composables/useRenderCount/index.ts

@@ -1,6 +1,6 @@
-import { onUpdated, readonly, type ComponentInternalInstance } from 'vue';
+import { onMounted, onUpdated, readonly, type ComponentInternalInstance } from 'vue';
 import { useCounter } from '../useCounter';
-import { getLifeCycleTarger } from '../../utils';
+import { getLifeCycleTarger } from '../..';
 
 /**
  * @name useRenderCount
@@ -18,8 +18,10 @@ import { getLifeCycleTarger } from '../../utils';
  */
 export function useRenderCount(instance?: ComponentInternalInstance) {
     const { count, increment } = useCounter(0);
+    const target = getLifeCycleTarger(instance);
 
-    onUpdated(increment, getLifeCycleTarger(instance));
+    onMounted(increment, target);
+    onUpdated(increment, target);
 
     return readonly(count);
 }