Checkout the below code which should work for you. No need of methods for changing the image on mouseover effect.

1. Take a variable imageIndex in data()
2. Next, on mouseover, assign the index of your v-for to the imageIndex variable
3. In the img tag, place a condition in :src which works as if the imageIndex is null then it will use the value of images and if not then it will use the image from the variants array by using the variants[imageIndex].image.
4. On mouseleave, the imageIndex will again set to null. (this is an additional code I have added, you can remove that line if you don't need to change the image back to default on mouseleave)

HTML:

<div class="images"></div>
  <img :src="imageIndex !== null ? variants[imageIndex].image : images" :alt="imagestitle" />
    <div
      v-for="(variant, index) in variants"
      :key="variant.id"
      @mouseover="imageIndex = index"
      @mouseleave="imageIndex = null"
    >
       {{ variant.color }}
    </div>

    <div>{{ cart }}</div>

    <button @click="adTo">addd</button>
</div>

JavaScript:

data() {
  return {
      imageIndex: null,
      cart: 0,
      imagestitle: "cat",
      images: "./socks_green.jpg",
      variants: [
         { id: 1, color: "green", image: "../assets/images/socks_green.jpg" },
         { id: 2, color: "blue", image: "../assets/images/socks_blue.jpg" },
         { id: 3, color: "blue", image: "../assets/images/socks_blue.jpg" },
         { id: 4, color: "blue", image: "../assets/images/socks_blue.jpg" },
         { id: 5, color: "blue", image: "../assets/images/socks_blue.jpg" },
         { id: 6, color: "blue", image: "../assets/images/socks_blue.jpg" },
      ],
   };
},

Just keep the name of the image with slash in List like : { id: 1, color: "green", image: "/socks_green" }.

In template: <img :src="../assets/images${images}.jpg" :alt="imagestitle" />

or you can try moving all the images in static folder and use them like :

<img :src="${images}.jpg" :alt="imagestitle" />