Can someone help me create a Rock Paper Scissors Game using Vue.js?

I need help creating a RPS game using Vue.js

the following is the premise of what needs to be shown in the code and how the game needs to run:

Code must include:

• el / data
• methods / computed
• v-bind (:) / v-on (@click)
• :class / :style
• v-if / v-else / v-for / v-show

Project Requirements:

• General
  • Only Show Player with Win Bar and Computer with Win Bar
  • Only Show Start New Game Button
• Player and Computer Win Bars
  • Show Player and Computer Wins
  • Use Dynamic CSS For Win Progress Bar
• Start New Game
  • Show Options to Begin Playing
  • Hide Start Game Button Show Game Functionality Buttons
• Game Functionality
  • Rock | Paper | Scissors
    • Compare User Choice with Computer
    • Update Wins
    • Show Outcome in Log
      • ex: Computer Chose Scissors | Rock Beats Scissors | Player Wins!
    • First to 10 Wins
      • Display User Win | Loss Status
      • End Game
  • Restart
    • Reset Everything
    • Let User Start New Game

So far I have it to where it only shows the Start New Game button at first and then once it is clicked it will show the Rock, Paper, Scissors, and Restart buttons but they are not functioning yet.

Below is an image showing what the game needs to look like and how it needs to function

So the score bars are blank white at first then as either player or computer wins it fills a little with green and shows a number representing how many wins they got (a progress bar if you will as you can see in the image the computer score bar isn't green all the way since they have less wins)

Next the rock paper scissors and restart buttons need to function accordingly to represent what the player or user chose and put that against what the computer randomly chooses

Next item is the result showing what the player chose and what the computer randomly chose, this should display within the li tags of the html file.

and lastly once either the player or the computer hits 10 wins the score bar at that point will be completely green, showing the number 10, and an alert popping up showing who the winner was and then at that point the user can click the restart button and be brought back to the start showing player, computer, the score bars (white/blank) and the start new game button.

• below is the html file:

PLAYER

COMPUTER

• Next is my app.js code

• new Vue({

  el: '#app',

  data: {

  show: true

  },

  methods: {

  }

  });

• Next is my app.css code

  /*base styles*/

  .text-center {

  text-align: center;

  }

  .wins {

  width: 80%;

  color: black;

  height: 40px;

  background-color: #eee;

  margin: auto;

  transition: width 1000ms;

  }

  .controls, .log {

  margin-top: 30px;

  text-align: center;

  padding: 10px;

  border: 1px solid #ccc;

  box-shadow: 0px 3px 6px #ccc;

  }

  .turn {

  margin-top: 20px;

  margin-bottom: 20px;

  font-weight: bold;

  font-size: 22px;

  }

  .log ul {

  list-style: none;

  font-weight: bold;

  text-transform: uppercase;

  }

  .log ul li {

  margin: 5px;

  }

  .log ul .player-turn {

  color: green;

  background-color: #aaffb0;

  }

  .log ul .computer-turn {

  color: red;

  background-color: #ffc0c1;

  }

  .log ul .tie-turn {

  color: blue;

  background-color: #e4e8ff;

  }

  button {

  font-size: 20px;

  background-color: #eee;

  padding: 12px;

  box-shadow: 0 1px 1px black;

  margin: 10px;

  }

  #start-game {

  background-color: #e4e8ff;

  }

  #start-game:hover {

  background-color: #687eff;

  }

  #rock {

  background-color: #ff7367;

  }

  #rock:hover {

  background-color: #ff3f43;

  }

  #paper {

  background-color: #ffaf4f;

  }

  #paper:hover {

  background-color: #ff9a2b;

  }

  #scissors {

  background-color: #aaffb0;

  }

  #scissors:hover {

  background-color: #76ff7e;

  }

  #restart {

  background-color: #ffffff;

  }

  #restart:hover {

  background-color: #c7c7c7;

  }

  **any help with styling is welcomed but I mostly need help with the game actually functioning, displaying score and progressing color in the bar, displaying below what the player chose/what the computer randomly chose and who won then display it below the buttons**

RPS with VueJS

Down localhost:63342 says: PLA PUTER You lost New Game? Cancel OK ROCK PAPER SCISSORS RESTART COMPUTER CHOSE SCISSORS ROCK BEATS SCISSORS | PLAYER WINS! COMPUTER CHOSE SCISSORS ROCK BEATS SCISSORS I PLAYER WINS! COMPUTER CHOSE SCISSORS SCISSORS BEATS PAPER COMPUTER WINS! COMPUTER CHOSE ROCK PAPER BEATS ROCK PLAYER WINS! COMPUTER CHOSE SCISSORS YOU HAVE TIED! COMPUTER CHOSE SCISSORS YOU HAVE TIED! COMPUTER CHOSE SCISSORS YOU HAVE TIED! COMPUTER CHOSE ROCK PAPER BEATS ROCK PLAYER WINS! COMPUTER CHOSE SCISSORS | ROCK BEATS SCISSORS PLAYER WINS! COMPUTER CHOSE PAPER | PAPER BEATS ROCK COMPUTER WINS! COMPUTER CHOSE SCISSORS | ROCK BEATS SCISSORS PLAYER WINS! COMPUTER CHOSE ROCK PAPER BEATS ROCK PLAYER WINS! COMPUTER CHOSE ROCK ROCK BEATS SCISSORS COMPUTER WINS! COMPUTER CHOSE ROCKPAPER BEATS ROCK PLAYER WINS! COMPUTER CHOSE ROCK YOU HAVE TIED! Down localhost:63342 says: PLA PUTER You lost New Game? Cancel OK ROCK PAPER SCISSORS RESTART COMPUTER CHOSE SCISSORS ROCK BEATS SCISSORS | PLAYER WINS! COMPUTER CHOSE SCISSORS ROCK BEATS SCISSORS I PLAYER WINS! COMPUTER CHOSE SCISSORS SCISSORS BEATS PAPER COMPUTER WINS! COMPUTER CHOSE ROCK PAPER BEATS ROCK PLAYER WINS! COMPUTER CHOSE SCISSORS YOU HAVE TIED! COMPUTER CHOSE SCISSORS YOU HAVE TIED! COMPUTER CHOSE SCISSORS YOU HAVE TIED! COMPUTER CHOSE ROCK PAPER BEATS ROCK PLAYER WINS! COMPUTER CHOSE SCISSORS | ROCK BEATS SCISSORS PLAYER WINS! COMPUTER CHOSE PAPER | PAPER BEATS ROCK COMPUTER WINS! COMPUTER CHOSE SCISSORS | ROCK BEATS SCISSORS PLAYER WINS! COMPUTER CHOSE ROCK PAPER BEATS ROCK PLAYER WINS! COMPUTER CHOSE ROCK ROCK BEATS SCISSORS COMPUTER WINS! COMPUTER CHOSE ROCKPAPER BEATS ROCK PLAYER WINS! COMPUTER CHOSE ROCK YOU HAVE TIED