diff --git a/tailbone/templates/grids/filter-components.mako b/tailbone/templates/grids/filter-components.mako
index 9ec1c049..ff5ba8b7 100644
--- a/tailbone/templates/grids/filter-components.mako
+++ b/tailbone/templates/grids/filter-components.mako
@@ -36,30 +36,15 @@
     const GridFilterNumericValue = {
         template: '#grid-filter-numeric-value-template',
         props: {
-            value: String,
+            ${'modelValue' if request.use_oruga else 'value'}: String,
             wantsRange: Boolean,
         },
         data() {
+            const value = this.${'modelValue' if request.use_oruga else 'value'}
+            const {startValue, endValue} = this.parseValue(value)
             return {
-                startValue: null,
-                endValue: null,
-            }
-        },
-        mounted() {
-            if (this.wantsRange) {
-                if (this.value.includes('|')) {
-                    let values = this.value.split('|')
-                    if (values.length == 2) {
-                        this.startValue = values[0]
-                        this.endValue = values[1]
-                    } else {
-                        this.startValue = this.value
-                    }
-                } else {
-                    this.startValue = this.value
-                }
-            } else {
-                this.startValue = this.value
+                startValue,
+                endValue,
             }
         },
         watch: {
@@ -72,6 +57,12 @@
                     this.$emit('input', this.startValue)
                 }
             },
+
+            ${'modelValue' if request.use_oruga else 'value'}(to, from) {
+                const parsed = this.parseValue(to)
+                this.startValue = parsed.startValue
+                this.endValue = parsed.endValue
+            },
         },
         methods: {
             focus() {
@@ -81,11 +72,36 @@
                 if (this.wantsRange) {
                     value += '|' + this.endValue
                 }
-                this.$emit('input', value)
+                this.$emit("${'update:modelValue' if request.use_oruga else 'input'}", value)
             },
             endValueChanged(value) {
                 value = this.startValue + '|' + value
-                this.$emit('input', value)
+                this.$emit("${'update:modelValue' if request.use_oruga else 'input'}", value)
+            },
+
+            parseValue(value) {
+                let startValue = null
+                let endValue = null
+                if (this.wantsRange) {
+                    if (value.includes('|')) {
+                        let values = value.split('|')
+                        if (values.length == 2) {
+                            startValue = values[0]
+                            endValue = values[1]
+                        } else {
+                            startValue = value
+                        }
+                    } else {
+                        startValue = value
+                    }
+                } else {
+                    startValue = value
+                }
+
+                return {
+                    startValue,
+                    endValue,
+                }
             },
         },
     }