refactor pages/user/clips.vue to composition API

packages/client/src/pages/user/clips.vue

@@ -9,40 +9,25 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { watch } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	user: Record<string, any>;
-		MkPagination,
+}>();
-	},
 
-	props: {
+const pagination = {
-		user: {
+	endpoint: 'users/clips',
-			type: Object,
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			pagination: {
-				endpoint: 'users/clips' as const,
 	limit: 20,
 	params: {
-					userId: this.user.id,
+		userId: props.user.id,
-				}
-			},
-		};
 	},
+};
 
-	watch: {
+let list = $ref();
-		user() {
+
-			this.$refs.list.reload();
+watch(props.user, () => list.reload());
-		}
-	},
-});
 </script>
 
 <style lang="scss" scoped>