[Python] How do i create a watch later feature to add movies to a section then remove later...

For my assignment, I need to create a feature where people can add different movies to a watch later section. For this, we are only allowed to use Brython, HTML, CSS, and Vue(I believe our lecturer wants us to use Vue2) (no JavaScript is allowed). I have created some code where I think I'm on the right track, but when I click the add button to add a movie to the watch later session, but is unsuccessful. Any help would be much appreciated, thanks.

For the User experience, I am trying to make it so that when the user clicks add next to their preferred movie, it would be added to the watch later section. Here, under the watch later section, if the user decides to change their mind, they can click remove to remove the movie from this watch later section.

Below is some of the code I've created.

<HTML>

<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="lib/style.css" />
<script src="https://unpkg.com/vue@2" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/brython@3/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/brython@3/brython_stdlib.js"></script>
</head>

<body onload="brython()">
<div id="app">
<form @submit.prevent="toggleWatchLater('Mickey 17')">
<label>Mickey 17</label>
<input type="submit" value="Add">
</form>

<form @submit.prevent="toggleWatchLater('Oppenheimer')">
<label>Oppenheimer</label>
<input type="submit" value="Add">
</form>

<form @submit.prevent="toggleWatchLater('Dead Poets Society')">
<label>Dead Poets Society</label>
<input type="submit" value="Add">
</form>

<div id="WatchLater">
<h2>Watch Later</h2>
<ul>
<li v-for="(movie, index) in watchLater" :key="index">
<h4>{{ movie }}
<button @click="removeFromWatchLater(index)">Remove</button>
</h4>
</li>
</ul>
</div>
</div>

<script type="text/python">
from browser import window

def toggleWatchLater(self, movie_title, *_):
if movie_title in self.watchLater:
self.watchLater.remove(movie_title)
else:
self.watchLater.append(movie_title)

def removeFromWatchLater(self, index):
self.watchLater.pop(index)

app = window.Vue.new({
'el': '#app',
'data': {
'watchLater': []
},
'methods': {
'toggleWatchLater': toggleWatchLater,
'removeFromWatchLater': removeFromWatchLater
}
})
</script>

Continue reading...