Coming from React, I am used to the concept of taking "control" of an html element value and events.

I am looking to do the same with VueJS.

I have, an input:

```
<input :value="foo" @input="changeFoo" pattern="[a-zA-Z0-9]+">

```

A computed value coming from my VueX store:

```
...mapState({
 foo: (state) => state.foo,
}),

```

A method that commits a mutation to my VueX state

```
changeFoo(e) { this.$store.commit('CHANGE_FOO', e.target)}

```

A mutation that updates the state if the regex pattern matches

```
CHANGE_FOO(state, target) {
  if (target.checkValidity()) {
    state.foo = target.value;
  }
 },

```

What works:

* my VueX state updates
* my input updates
* if checkValidity returns `false`, the store is not updated

**What doesn't work:**

* even if the store is not updated, the `<input />` value changes... What I want is bind a single source of truth to my `<input />` component