searchanddisplace-core/resources/js/components/Regex/Flags.vue

<template>
    <div id="flags" class="flags">
        <div class="input-group">
            <label for="global_match">
                <input type="checkbox"
                       value="g"
                       v-model="flags"
                       id="global_match"> global match
            </label>
        </div>

        <div class="input-group">
            <label for="ignore_case">
                <input type="checkbox"
                       value="i"
                       v-model="flags"
                       id="ignore_case"> case insensitive
            </label>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Watch, Vue} from "vue-property-decorator";

    @Component
    export default class Flags extends Vue {
        private flags: Array<string> = ['g'];

        @Prop() public readonly value!: Array<string>;

        @Watch('flags')
        flagsChanged(update: Array<string>) {
            this.$emit('input', update);
        }

        @Watch('value')
        valueChanged(update: Array<string>) {
            this.flags = update;
        }

        created() {
            this.flags = this.value;
        }
    };
</script>