How to add last element of an array to another array in vue/Javascript

I have a vue application where I am trying to push the last elemnt of an array to another array each time a specific button is clicked. I tried this approach:

  generateGroup(){
          this.$refs.addGroupModal.generateGroup() 
   this.meetingsArray.push(this.meetingArrayBackend[this.meetingArrayBackend.length - 1])
        },

this is the method which is called from my $ref:

generateGroup(){
    var pageURL = window.location.href;
    var lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
     const newMeeting = {meetingUrl: "", meetingName: "", date: this.selectedDate, startTime: "", endTime: ""};
      newMeeting.meetingUrl = "https://jitsi.zim.uni-due.de/" + this.randomUrlIdGenerator().toString()
      newMeeting.meetingName = lastURLSegment
    this.model.forEach((model, i) => {
      const key = `participant${i + 1}`;
      newMeeting[key] = model.voterUniqueName;
      newMeeting.startTime = model.startTime;
      newMeeting.endTime = model.endTime
    })
    this.newGroup = [],
    this.finalMeetingArray.push(newMeeting)
    setTimeout(() => { this.newGroup.push(newMeeting) })
    this.newGroup = []
    this.selectedDate = ""
    this.model = []

But the problem is it only works if I have more than one element inside meetingArrayBackend. But I want to add everytime on button click the last element of that array to the inside meetingArray

Maybe the error is because I am sync ing the meetingArrayBackend with a prop from another component like this:

<AddGroupsModal :new-group.sync="meetingArrayBackend" ref="addGroupModal"/>

And use it to display like this:

<v-col>
        <v-data-table
            :headers="headers"
            :items="meetingArrayBackend"
            :items-per-page="3"
            class="elevation-1"
        ></v-data-table>
      </v-col>