Dynamic component by select input /w Vuex store binding

I don't know how to change a dynamic component based on a selectbox option with two-way binding to a Vuex Store. My single file component (Fieldvalue) houses this dynamic component and also the selectbox. Its type value comes from a Vuex Store, where it can be found by the fieldId, which is passed through the parent component. So to a field with an ID like 41, there is a fieldvalue component. The get() function of fieldtypeComponent has somehow to know the passed through fieldId value from the props, that the parent passes down, to have the ID for searching in the fieldvalues array of the store.
But it does not work how I'm doing it. (commented out lines)
Any ideas?

My Vuex store getter:

export function getFieldvalueTypeByFieldnameId(state){
    return (fieldId) => {
        const fieldvalue = state.form.fieldvalues.find(e => e.fieldId == fieldId);
        return fieldvalue.type;
    }
}

Mutation:

export function setFieldvalueType(state, obj){
  const { type, fieldId } = obj;
  const fieldvalue = state.form.fieldvalues.find( e => e.fieldId === fieldId );
  fieldvalue.type = type;
}

My Vuex store state example:

{
  "form": {
    "name": "",
    "fieldvalues": [
      {
        "formularId": null,
        "fieldId": 41,
        "value": {},
        "type": ""
      },
      {
        "formularId": null,
        "fieldId": 44,
        "value": {},
        "type": ""
      }
    ]
  }
}

My single file component:

<template>
  <div class="row">
    <div class="col-3 self-center">
      <q-select
        square
        filled
        v-model="fieldtypeComponent"
        :options="fieldtypes"
        option-value="component"
        map-options
        emit-value
        label="Type"
      />
    </div>
    <div class="col">
      <template
        v-if="fieldtypeComponent === null || fieldtypeComponent == undefined">
        <p>no type selected</p>
      </template>
      <component v-else :is="fieldtypeComponent"></component>
    </div>
  </div>
</template>

<script>
import IconField from "components/fieldtypes/IconField";
import TextField from "components/fieldtypes/TextField";

export default {
  name: "Fieldvalue",
  data() {
    return {
      selected: "",
      fieldtypes: [
        { label: "Icon", component: "IconField" },
        { label: "Text", component: "TextField" }
      ]
    };
  },
  components: {
    IconField,
    TextField
  },
  computed: {
    fieldtype: function() {
      return this.$store.getters["formular/getFieldvalueTypeByFieldnameId"];
    },
    fieldtypeComponent: {
      get() {
        //return this.fieldtyp(this.fieldnameId);
        //return this.$store.getters["formular/getFieldvalueType"];
        return null;
      },
      set(type) {
        const payload = {
          type,
          fieldId: this.forFieldnameId
        };
        this.$store.commit("formular/setFieldvalueType", payload);
      }
    }
  },
  props: {
    forFieldnameId: { type: Number, required: true }
  },
  methods: {
    changeComponent() {
      this.fieldtypeComponent = this.selected;
      const payload = {
        type: this.selected,
        fieldId: this.forFieldnameId
      };
      this.$store.commit("tarife/setFieldvalueTyp", payload);
    }
  }
};
</script>

Additional info on what I want to do:
I have some fields defined in a formular with a name. To each fieldname from that form I want to save a value later.
But that value (a javascript object/JSON) is different depending on the choosen component from the select input. (TextField or IconField)
I don't know if my way of passing down is right or too complex. Especially regarding to two-way binding or just emitting up to the parent component and let it handle the complete logic.
I need to somehow bind the value from in the chosen component to the Vuex store fieldvalue entry too.

Maybe my approach is wrong and I should do it totally different?