Vue JS - Two way data binding on a button with v-model

Off course it is possible, that's the goal of modern JS frameworks.

What the error says is that binding data on "button" tag is not possible. The reason is that "button" is a native html element.

So if you want to bind datas on a button, just create a new component like "my-button", then you could achieve ti !

<my-button 
    class="colorpicker"
    :type="button"
    v-model="settings.primary_color" 
    :data-color="settings.primary_color" 
    :style="{'background-color' : settings.primary_color}"
></my-button>

By better understanding your problem, I propose you this solution

Just change your button by an input[type="color"]

The component :

<template>
  <div>
    <input type="color" v-model="color"/>
    {{ color }}
  </div>
</template>

<script>
export default {
  name: "ColorPicker",
  data: () => ({
    color: "#000000",
  }),
};
</script>

And because we have now an input, v-model is possible

EDIT : So, stay with your button (i guess, that your colorpicker class is important because you already did some work on it)

According to VueJs documentation, to create your own two ways data binding, you have to get the prop "value" and emit the signal "input" on the component

(I just made a generateRandomColor() function to be faster)

Create a button component :

<template>
  <div>
    <button class="colorpicker" @click="triggered">Click me</button>
  </div>
</template>


<script>
export default {
  name: "ColorPicker",
  props: {
    value: String,
  },
  data: () => ({
    value_: "#000000",
  }),
  methods: {
    triggered: function () {
      this.value_ = this.getRandomColor();
      this.$emit("input", this.value_);
    },
    getRandomColor: function () {
      var letters = "0123456789ABCDEF";
      var color = "#";
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    },
  },
};
</script>

Then, call it in your parent :

<color-picker v-model="colors.primary"></color-picker>

For your use, you just have to update the value_ property in custom button component and value will automatically update in parent