fix double component rendering ( only hidden )

src/views/contents/ContentList.vue

@@ -5,15 +5,11 @@
                      class="md:gap-2">
 
     <template v-for="content in contents" :key="content.id">
-
-      <div class="d-sm-none mb-1">
-        <content-card-sm :content="content" @content-deleted="onContentDeleted"></content-card-sm>
-      </div>
-
-     
-      <div class="d-none d-sm-flex">
-        <content-card-normal :content="content" @content-deleted="onContentDeleted"></content-card-normal>
-      </div>
+      <component
+          :is="isSmallScreen ? ContentCardSm : ContentCardNormal"
+          :content="content"
+          @content-deleted="onContentDeleted"
+      ></component>
     </template>
 
     <template v-slot:empty>
@@ -31,7 +27,7 @@
 
 <script setup>
 import {useClient} from '@/plugins/api.js';
-import {ref, watch} from 'vue';
+import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
 import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
 import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";
 
@@ -51,6 +47,21 @@ const contents = ref(props.contents)
 const errorMessage = ref()
 let last_id = null
 
+const isSmallScreen = ref(false);
+
+const updateScreenSize = () => {
+  isSmallScreen.value = window.matchMedia('(max-width: 600px)').matches;
+};
+
+onMounted(() => {
+  updateScreenSize();
+  window.addEventListener('resize', updateScreenSize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateScreenSize);
+});
+
 async function onContentDeleted(contentId) {
   contents.value = contents.value.filter(c => c.id !== contentId)
 }