I'm having an issue with my site that I've been trying to fix for at least a few weeks, so I was hoping someone could point me out where I'm going wrong. For some background, I'm a recent grad and this is the capstone project I built for my final project, before the demo I didn't quite get all the features I wanted, now that I've finished the course I'm trying to give an introduction Features that I feel are missing. That being said, I built a wishlist of horror movies using a Rails backend and a Vue frontend with a Bootstrap theme that I can add to the watchlist and either add them to the loved list or hate it list, but the last thing I want is for when you click the button to add it to said list, it removes it from the unwatched list. I have a boolean set up on the backend but for the life of me I can't get the logic right to flip it from true to false I don't know if I need something on the frontend or what but like I said I we Been trying to solve this problem for at least two weeks now, so any help would be great.

My architecture

create_table "hatedits", force: :cascade do |t|
    t.integer "movie_id"
    t.integer "user_id"
    t.string "box_art"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "lists", force: :cascade do |t|
    t.integer "user_id"
    t.integer "movie_id"
    t.boolean "watched"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

  create_table "lovedits", force: :cascade do |t|
    t.integer "movie_id"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.integer "user_id"
    t.string "box_art"
   end

  create_table "movies", force: :cascade do |t|
    t.string "name"
    t.string "description"
    t.string "box_art"
    t.string "sub_genre"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.integer "year"
    t.string "category"
  end

  create_table "users", force: :cascade do |t|
    t.string "name"
    t.string "email"
    t.string "password_digest"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
  end

end

My Rails update and create functions (I think that's the problem, but I just can't see it.)

def create
    list = List.create(
      user_id: current_user.id,
      movie_id: params[:movie_id],
      watched: false,
    )

    if list.save
      render json: list
    else
      render json: {errors: list.errors.full_messages}, status: 406
    end
  end 


  def update
    list = List.find_by(id: params[:id])
    list.movie_id = params[:movie_id] || list.movie_id
    if watched = true
      render json: list
    end 
 
 

    if list.save
      render json: list
    else
      render json: {errors: list.errors.full_messages}, status: 406
    end 
  end

I have a frontend with buttons and methods for moving to different lists which work but when a movie is moved to the liked or disliked list it does not remove the movie from the unwatched list,

<template>
  <div class="list">
    <br />
    <br />
    <br />
    <br />
    <br />
    <section id="portfolio" class="portfolio">
      <div class="container">
         <div class="row portfolio-container">
          <div class="col-lg-4 col-md-6 portfolio-item filter-app" v-for="list in lists" 
v-bind:key="list.id">
            <div class="portfolio-wrap">
              <img :src="`${list.movie.box_art}`" />
               <br />

              <div class="portfolio-info">
                <div class="portfolio-links">
                  <button v-on:click="lovedIt(list)">Loved It</button>

                  <br />
                  <br />
                  <button v-on:click="hatedIt(list)">Hated It</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style>
.list {
  text-align: center;
  color: white;
}
img {
  height: 624px;
  width: 370px;
}
</style>
<script>
import axios from "axios";

export default {
  data: function () {
    return {
      list: {},
      lists: {},
      movie: [],
      currentUser: localStorage.getItem("user_id"),
    };
  },
  created: function () {
    this.indexLists();
  },
  methods: {
    indexLists: function () {
      axios.get("/lists").then((response) => {
        this.lists = response.data;
        console.log("list", response.data);
      });
    },
    addMovie: function () {
      axios.post("/lists", this.movie).then(() => {
        this.$router.push("/lists");
      });
    },
    lovedIt: function (list) {
      this.list = list;
      axios
        .post("/lovedits", {
          user_id: this.currentUser.id,
          movie_id: this.list.movie_id,
        })
        .then(() => {
          console.log("yo");
          this.$router.push("/lovedit");
          location.reload();
        });
    },
    hatedIt: function (list) {
      this.list = list;
      axios
        .post("/hatedits", {
          user_id: this.currentUser.id,
          movie_id: this.list.movie_id,
        })
        .then(() => {
          console.log("sup");
          this.$router.push("/hatedit");
          location.reload();
        });
    },
  },
};
</script>