Changing the ComponentOptions does not make any change to my QR

[Vitomir2]

Hi, @Binaryify , thanks for the awesome library and the good documentation.

I am using the ComponentOptions, but for some reason no matter what value I set for each property, nothing is changing. This is my code for the HTML:

<v-row v-if="!useDefaultQR">
    <v-expansion-panels>
        <v-expansion-panel>
            <v-expansion-panel-header>{{ $t('label.qrCustomizations') }}</v-expansion-panel-header>
            <v-expansion-panel-content>
                <v-row>
                    <v-col cols="12">
                        <v-text-field
                            :label="`${$t('label.qrText')}`"
                            type="text"
                            v-model="logoCustomization.text"
                            autofocus
                        ></v-text-field>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="6" v-for="(color, i) in colors" :key="i">
                        <v-text-field
                            v-model="logoCustomization[color.key]"
                            :label="$t(`label.${color.key}`)"
                            @click="color.dialog = true"
                            readonly
                        >
                            <template v-slot:append>
                                <v-menu
                                    v-model="color.dialog"
                                    top
                                    nudge-bottom="105"
                                    nudge-left="16"
                                    :close-on-content-click="false"
                                >
                                    <template v-slot:activator="{ on }">
                                        <div :style="switchStyle(color.key)" v-on="on" />
                                    </template>
                                    <v-card>
                                        <v-card-text class="pa-0">
                                            <v-color-picker v-model="logoCustomization[color.key]" flat />
                                        </v-card-text>
                                    </v-card>
                                </v-menu>
                            </template>
                        </v-text-field>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="12">
                        <v-slider
                            v-model="logoCustomization.logoCornerRadius"
                            :label="$t('label.logoCornerRadius')"
                            min="8"
                            max="64"
                            thumb-label
                        ></v-slider>
                    </v-col>
                </v-row>
                <v-row>
                    <v-col cols="12" style="text-align: center">
                        <vue-qr
                            v-if="input.type.toLowerCase() === types[1].value.toLowerCase()"
                            :text="logoCustomization.text"
                            :qid="`device-qr-test-qid`"
                            :id="`device-qr-test-id`"
                            :correctLevel="3"
                            :colorDark="logoCustomization.qrColorDark"
                            :colorLight="logoCustomization.qrColorLight"
                            :logoSrc="'https://i.picsum.photos/id/527/200/200.jpg?hmac=pt4SE0tD3d9wOZOKl-3uFHKRXPwF77K_UHZATkDnP5k'"
                            :logoCornerRadius="logoCustomization.logoCornerRadius"
                            :binarize="true"
                        ></vue-qr>
                        <vue-qr
                            v-if="input.type.toLowerCase() === types[1].value.toLowerCase()"
                            :text="logoCustomization.text"
                            :qid="`device-qr-test-qid`"
                            :id="`device-qr-test-id`"
                            :correctLevel="3"
                            :colorDark="logoCustomization.qrColorDark"
                            :colorLight="logoCustomization.qrColorLight"
                            :logoSrc="'https://i.picsum.photos/id/527/200/200.jpg?hmac=pt4SE0tD3d9wOZOKl-3uFHKRXPwF77K_UHZATkDnP5k'"
                            :logoCornerRadius="logoCustomization.logoCornerRadius"
                            :binarize="true"
                            :components="componentOptionsTemp"
                        ></vue-qr>
                    </v-col>
                </v-row>
            </v-expansion-panel-content>
        </v-expansion-panel>
    </v-expansion-panels>
</v-row>

And then, here is my componentOptionsTemp (I am using "vue-qr": "^4.0.9") :

<script>
    import VueQr from 'vue-qr'

    export default {
        components: {
            VueQr
        },
        data() {
            return {
                //temp
                componentOptionsTemp: {
                    data: {
                        scale: 0.1
                    },
                    timing: {
                        scale: 0.5,
                        protectors: false
                    },
                    alignment: {
                        scale: 0.1,
                        protectors: false
                    },
                    cornerAlignment: {
                        scale: 0.1,
                        protectors: true
                    }
                }
            }
        }
    }
</script>

The problem is that, both the QRs look exactly the same way: