I want to display every song that i have added to currentplaylist by using vuex store

I am trying to add songs that i am searching for to my own state in my own playlist. This is my store file:

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import VueAxios from "vue-axios";

Vue.use(Vuex);
Vue.use(VueAxios, axios);

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    player: {
      isPlaying: false,
      showVideo: false,
    },

    allPlaylists: {
      playlists: [],
    },
    searchList: {
      id: null,
      search: "",
      songs: [],
    },
    content: [],
    results: [],
    currentsong: "",
    currentPlayList: [],
  },
  getters: {
    getIsPlaying: (state) => {
      return state.isPlaying;
    },
    getShowVideo: (state) => {
      return state.showVideo;
    },
    getCurrentSong: (state) => {
      return state.currentSong;
    },
    getCurrentPlaylist: (state) => {
      return state.currentPlaylist;
    },
    getAllPlaylists: (state) => {
      return state.currentPlaylist;
    },
  },
  mutations: {
    setIsPlaying: (state, status) => {
      state.isPlaying = status;
    },
    setShowVideo: (state, status) => {
      state.showVideo = status;
    },
    SetSong(state, song) {
      state.currentsong = song;
    },

    addSong(state, currentPlayList) {
      state.currentPlayList = currentPlayList;
      console.log(currentPlayList);
    },
    setAllPlaylists: (state, status) => {
      state.allPlaylists = status;
    },

    returnResults: (state, results) => {
      state.results = results;
      console.log(results);
    },
  },
  actions: {
    /*
         TODO: Build API wrapper to call api requests
         import API from '@api/index.js'
         source-folder/api/index.js
         */

    // USER API
    // 3000:/api/users

    getUserStatus(context) {
      // fetch user and load into state
    },
    loginUser(contex) {
      // delete user and load into state
    },
    registerUser(contex) {
      // register user and load into state
    },
    logoutUser(contex) {
      // logout user and load into state
    },

    // PLAYLIST API
    // 3000:/api/playlists

    getPlaylist(playlistId) {
      // fetch playlists and load into state
      // 3000:/api/playlists/:id
    },
    async getSearchResults({ commit }, query) {
      const res = await axios.get(`/api/yt/songs/${query}`);
      // Execute the mutation which receive the data and pass to the state
      commit("returnResults", res.data.content);
    },

    addPlaylist(playlistId) {
      // add playlist and load into state
    },
    deletePlaylist(playlistId) {
      // delete playlist and load into state
    },

    // SONGS API
    // 3000:/api/playlists

    getSongs(songId) {
      // fetch songs and load into state
    },
    addSong(songId) {
      // add song here load into state
    },
    deleteSong(songId) {
      // delete song and load into state
    },
  },
});

Then in my search field i search for a song then i get search results in my searchresults compononent and i have a button where i can add the song to my state.

<template>
  <v-main>
    <v-card class="mx-auto" max-width="344" outlined>
      <v-row align="center" justify="space-around">
        <div>
          <h1>Playlist</h1>
          <ul>
            <li
              @click="setSong(song.videoId)"
              v-for="song in content"
              :key="song.videoId"
            >
              {{ song.name }}
              <v-btn tile color="success" @click="addSong(song.videoId)">
                <v-icon left>
                  mdi-pencil
                </v-icon>
              </v-btn>
            </li>
          </ul>

          <!--  -->
        </div>
      </v-row>
    </v-card>
  </v-main>
</template>

<script>
export default {
  name: "SearchResults",
  computed: {
    content() {
      return this.$store.state.results;
    },
  },
  methods: {
    setSong(videoId) {
      this.$store.commit("SetSong", videoId);
    },
    addSong(videoId) {
      this.$store.commit("addSong", videoId);
    },
  },
  // addSong(videoId) {
  //   this.$store.commit("AddSong", videoId);
  // },
};

I want to display every song that i have added to currentplaylist

<template>
  <v-list class="pl-14" shaped>
    <v-list-item    v-for="song in content"
              :key="song.videoId"
            >
            {{ song.name }}
      <v-list-item-content>
        <v-list-item-title>     {{ song.name }} </v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-list>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex";

export default {
    name: "Playlist",
     computed: {
  content() {
      return this.$store.state.currentPlayList;
    },
  },
};
</script>

<style scoped>