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: