use :key to force re-render upNext component

src/App.vue

@@ -21,10 +21,12 @@
       <router-view />
     </div>
     <div class="r-sidebar">
-      <Search :collapser="collapser"/>
-      <NowPlaying />
-      <UpNext :collapser="collapser" @updateCollapser="updateCollapser"/>
-      <RecommendedArtist/>
+      <Search />
+      <div class="m-np">
+        <NowPlaying />
+      </div>
+      <UpNext v-model:up_next="up_next" @updateCollapser="updateCollapser" :key="componentKey"/>
+      <RecommendedArtist />
     </div>
   </div>
 </template>
@@ -38,7 +40,7 @@ import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
 import Search from "./components/RightSideBar/Search.vue";
 import NowPlaying from "./components/RightSideBar/NowPlaying.vue";
 import UpNext from "./components/RightSideBar/UpNext.vue";
-import RecommendedArtist from "./components/RightSideBar/Recommendation.vue"
+import RecommendedArtist from "./components/RightSideBar/Recommendation.vue";
 
 export default {
   components: {
@@ -47,8 +49,9 @@ export default {
     Search,
     NowPlaying,
     UpNext,
-    RecommendedArtist
+    RecommendedArtist,
   },
+
   setup() {
     const collapsed = ref(true);
 
@@ -58,13 +61,16 @@ export default {
       collapsed.value = !collapsed.value;
     }
 
-    const collapser = ref(false)
-    const updateCollapser = ()=> {
-      collapser.value = !collapser.value
-      console.log(collapser.value);
-    }
+    let up_next = ref(true);
+    const componentKey = ref(0);
 
-    return { logo, toggleNav, collapsed, collapser, updateCollapser };
+    const updateCollapser = () => {
+      up_next.value = !up_next.value
+      console.log(up_next.value)
+      componentKey.value +=1;
+    };
+
+    return { logo, toggleNav, collapsed, up_next, updateCollapser, componentKey };
   },
 };
 </script>
@@ -153,4 +159,12 @@ export default {
 .collapsed #settings-button #text {
   display: none;
 }
+.r-sidebar {
+  position: relative;
+  margin-bottom: .5em;
+}
+.m-np {
+  position: absolute;
+  bottom: 0;
+}
 </style>

src/assets/css/global.css

@@ -18,6 +18,15 @@ body {
     display: flex;
     align-items: center;
 }
+
+.t-center {
+    text-align: center;
+}
+
+.h-1:hover {
+    background-color: #3a39393d;
+}
+
 a {
     text-decoration: none;
     color: #fff;

src/components/RightSideBar/Recommendation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="r-tracks rounded">
-    <p class="heading">RECOMMENDED TRACKS</p>
+    <p class="heading">SIMILAR TRACKS</p>
     <div class="tracks">
       <div class="song-item" v-for="song in songs" :key="song">
         <div class="album-art image"></div>
@@ -24,21 +24,22 @@ export default {
       },
       {
         title: "Slim shady",
-        artist: "Eminem"
-      }
+        artist: "Eminem",
+      },
     ];
 
-    return { songs };
+    const r_albums = ["Crybaby", "Everybody's Everything", "Castles II"];
+
+    return { songs, r_albums };
   },
 };
 </script>
 
 <style>
 .r-tracks {
-  margin-top: .5rem;
+  margin-top: 0.5rem;
   background-color: #131313b2;
-  padding: .5rem;
-
+  padding: 0.5rem;
 }
 
 .r-tracks .tracks .song-item {

src/components/RightSideBar/UpNext.vue

@@ -3,7 +3,7 @@
     <p class="heading">
       COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span>
     </p>
-    <div class="main-item">
+    <div class="main-item h-1">
       <div class="album-art image"></div>
       <div class="tags">
         <p class="title">Hard to forget</p>
@@ -11,9 +11,9 @@
         <p class="artist">Sam hunt</p>
       </div>
     </div>
-    <div class="all-items" v-if="collapsed && !another_is_open">
+    <div class="all-items" v-if="!toggle">
       <div class="scrollable">
-        <div class="song-item" v-for="song in songs" :key="song">
+        <div class="song-item h-1" v-for="song in songs" :key="song">
           <div class="album-art image"></div>
           <div class="tags">
             <p class="title">{{ song.title }}</p>
@@ -28,8 +28,9 @@
 
 <script>
 import { ref } from "@vue/reactivity";
+
 export default {
-  props: ["collapser"],
+  props: ["up_next"],
   emits: ["updateCollapser"],
   setup(props, context) {
     const songs = [
@@ -111,15 +112,15 @@ export default {
       },
     ];
 
-    const collapsed = ref(false);
-    const another_is_open = ref(props.collapser);
+    // const collapsed = ref(false);
+    const toggle = ref(props.up_next);
 
     let collapse = () => {
-      collapsed.value = !collapsed.value;
-      context.emit("updateCollapser");
+      // collapsed.value = !collapsed.value;
+      context.emit('updateCollapser');
     };
 
-    return { songs, collapsed, collapse, another_is_open };
+    return { songs, collapse, toggle };
   },
 };
 </script>
@@ -159,10 +160,6 @@ export default {
   margin-bottom: 0.5rem;
 }
 
-.up-next .main-item:hover {
-  background-color: #3a39393d;
-}
-
 .up-next .main-item .album-art {
   width: 4.5rem;
   height: 4.5rem;
@@ -214,7 +211,6 @@ export default {
 }
 
 .up-next .all-items .scrollable .song-item:hover {
-  background-color: #3a39393d;
   cursor: pointer;
 }