converting songs to new vue3 syntax. Adding copy/paste buttons

src/components/songs.vue

@@ -1,25 +1,19 @@
-<script lang="ts">
+<script setup>
-	import axios from 'axios';
+	import { onMounted, ref } from 'vue'
 
-	export default {
+	const songs = ref([])
-		data() {
+
-			return {
+	onMounted(async ()=>{
-				songs:[]
+		const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'songs')
-			}
+		songs.value = await response.json()
-		},
-		mounted() {
-			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'songs').then((response)=>{
-				this.songs = response.data
 	})
-		},
+	const copy = (title) => {
-		methods: {
+		navigator.clipboard.writeText(title);
-			copy(event){
-				navigator.clipboard.writeText(event.target.innerText);
 	}
-		},
+	const paste = (title) => {
+		alert(title)
 	}
 </script>
-
 <template>
 	<h2>Songs</h2>
 	<table>
@@ -33,12 +27,13 @@
 		<tbody>
 			<tr v-for="song in songs">
 				<td>{{song.id}}</td>
-				<td @click="copy">{{song.title}}</td>
+				<td>
+					{{song.title}}
+					<button @click="copy(song.title)">Copy</button>
+					<button @click="paste(song.title)">Paste</button>
+				</td>
 				<td>{{song.notes}}</td>
 			</tr>
 		</tbody>
 	</table>
 </template>
-
-<style scoped>
-</style>