diff --git a/ui/src/directives/ClosePopup.js b/ui/src/directives/ClosePopup.js
index 37baf6a5f16..da9243146a8 100644
--- a/ui/src/directives/ClosePopup.js
+++ b/ui/src/directives/ClosePopup.js
@@ -20,10 +20,24 @@ function getDepth (value) {
   return isNaN(depth) ? 0 : depth
 }
 
+function destroy (el) {
+  const ctx = el.__qclosepopup
+  if (ctx !== void 0) {
+    el.removeEventListener('click', ctx.handler)
+    el.removeEventListener('keyup', ctx.handlerKey)
+    delete el.__qclosepopup
+  }
+}
+
 export default {
   name: 'close-popup',
 
   bind (el, { value }, vnode) {
+    if (el.__qclosepopup !== void 0) {
+      destroy(el)
+      el.__qclosepopup_destroyed = true
+    }
+
     const ctx = {
       depth: getDepth(value),
 
@@ -39,10 +53,6 @@ export default {
       }
     }
 
-    if (el.__qclosepopup !== void 0) {
-      el.__qclosepopup_old = el.__qclosepopup
-    }
-
     el.__qclosepopup = ctx
 
     el.addEventListener('click', ctx.handler)
@@ -56,11 +66,11 @@ export default {
   },
 
   unbind (el) {
-    const ctx = el.__qclosepopup_old || el.__qclosepopup
-    if (ctx !== void 0) {
-      el.removeEventListener('click', ctx.handler)
-      el.removeEventListener('keyup', ctx.handlerKey)
-      delete el[el.__qclosepopup_old ? '__qclosepopup_old' : '__qclosepopup']
+    if (el.__qclosepopup_destroyed === void 0) {
+      destroy(el)
+    }
+    else {
+      delete el.__qclosepopup_destroyed
     }
   }
 }
diff --git a/ui/src/directives/GoBack.js b/ui/src/directives/GoBack.js
index 40111f7e2e6..0d2f2d528b8 100644
--- a/ui/src/directives/GoBack.js
+++ b/ui/src/directives/GoBack.js
@@ -1,10 +1,24 @@
 import { client } from '../plugins/Platform.js'
 import { isKeyCode } from '../utils/key-composition.js'
 
+function destroy (el) {
+  const ctx = el.__qgoback
+  if (ctx !== void 0) {
+    el.removeEventListener('click', ctx.goBack)
+    el.removeEventListener('keyup', ctx.goBackKey)
+    delete el.__qgoback
+  }
+}
+
 export default {
   name: 'go-back',
 
   bind (el, { value, modifiers }, vnode) {
+    if (el.__qgoback !== void 0) {
+      destroy(el)
+      el.__qgoback_destroyed = true
+    }
+
     const ctx = {
       value,
 
@@ -31,35 +45,26 @@ export default {
       }
     }
 
-    if (el.__qgoback) {
-      el.__qgoback_old = el.__qgoback
-    }
-
     el.__qgoback = ctx
+
     el.addEventListener('click', ctx.goBack)
     el.addEventListener('keyup', ctx.goBackKey)
   },
 
-  update (el, { value, oldValue, modifiers }) {
+  update (el, { value, oldValue }) {
     const ctx = el.__qgoback
 
-    if (ctx !== void 0) {
-      if (value !== oldValue) {
-        ctx.value = value
-      }
-
-      if (ctx.single !== modifiers.single) {
-        ctx.single = modifiers.single
-      }
+    if (ctx !== void 0 && value !== oldValue) {
+      ctx.value = value
     }
   },
 
   unbind (el) {
-    const ctx = el.__qgoback_old || el.__qgoback
-    if (ctx !== void 0) {
-      el.removeEventListener('click', ctx.goBack)
-      el.removeEventListener('keyup', ctx.goBackKey)
-      delete el[el.__qgoback_old ? '__qgoback_old' : '__qgoback']
+    if (el.__qgoback_destroyed === void 0) {
+      destroy(el)
+    }
+    else {
+      delete el.__qgoback_destroyed
     }
   }
 }
diff --git a/ui/src/directives/Intersection.js b/ui/src/directives/Intersection.js
index 333a3217100..662167cc313 100644
--- a/ui/src/directives/Intersection.js
+++ b/ui/src/directives/Intersection.js
@@ -6,9 +6,7 @@ const defaultCfg = {
   rootMargin: '0px'
 }
 
-function update (el, ctx, { modifiers, value }) {
-  ctx.once = modifiers.once
-
+function update (el, ctx, value) {
   let handler, cfg, changed
 
   if (typeof value === 'function') {
@@ -70,16 +68,32 @@ function destroy (el) {
 export default {
   name: 'intersection',
 
-  inserted (el, binding) {
-    const ctx = {}
-    update(el, ctx, binding)
+  inserted (el, { modifiers, value }) {
+    if (el.__qvisible !== void 0) {
+      destroy(el)
+      el.__qvisible_destroyed = true
+    }
+
+    const ctx = {
+      once: modifiers.once === true
+    }
+
+    update(el, ctx, value)
+
     el.__qvisible = ctx
   },
 
   update (el, binding) {
     const ctx = el.__qvisible
-    ctx !== void 0 && update(el, ctx, binding)
+    ctx !== void 0 && update(el, ctx, binding.value)
   },
 
-  unbind: destroy
+  unbind (el) {
+    if (el.__qvisible_destroyed === void 0) {
+      destroy(el)
+    }
+    else {
+      delete el.__qvisible_destroyed
+    }
+  }
 }
diff --git a/ui/src/directives/Morph.js b/ui/src/directives/Morph.js
index e04ed50e47d..4c989ac8204 100644
--- a/ui/src/directives/Morph.js
+++ b/ui/src/directives/Morph.js
@@ -208,7 +208,7 @@ export default {
       destroy(el)
     }
     else {
-      delete el.__qmorph__old
+      delete el.__qmorph_destroyed
     }
   }
 }
diff --git a/ui/src/directives/Mutation.js b/ui/src/directives/Mutation.js
index 30c5cef92e8..5c6584b3ab2 100644
--- a/ui/src/directives/Mutation.js
+++ b/ui/src/directives/Mutation.js
@@ -1,5 +1,3 @@
-import { isDeepEqual } from '../utils/is.js'
-
 const defaultCfg = {
   childList: true,
   subtree: true,
@@ -9,38 +7,20 @@ const defaultCfg = {
   characterDataOldValue: true
 }
 
-function update (el, ctx, { modifiers: { once, ...mod }, value }) {
-  let changed
-
-  ctx.once = once
-
-  if (ctx.handler !== value) {
-    changed = true
-    ctx.handler = value
-  }
+function update (el, ctx, value) {
+  ctx.handler = value
+  ctx.observer !== void 0 && ctx.observer.disconnect()
 
-  if (ctx.opts === void 0 || isDeepEqual(mod, ctx.mod) === false) {
-    changed = true
-    ctx.mod = mod
-    ctx.opts = Object.keys(mod).length === 0
-      ? defaultCfg
-      : mod
-  }
-
-  if (changed === true) {
-    ctx.observer !== void 0 && ctx.observer.disconnect()
-
-    ctx.observer = new MutationObserver(list => {
-      if (typeof ctx.handler === 'function') {
-        const res = ctx.handler(list)
-        if (res === false || ctx.once === true) {
-          destroy(el)
-        }
+  ctx.observer = new MutationObserver(list => {
+    if (typeof ctx.handler === 'function') {
+      const res = ctx.handler(list)
+      if (res === false || ctx.once === true) {
+        destroy(el)
       }
-    })
+    }
+  })
 
-    ctx.observer.observe(el, ctx.opts)
-  }
+  ctx.observer.observe(el, ctx.opts)
 }
 
 function destroy (el) {
@@ -55,16 +35,37 @@ function destroy (el) {
 export default {
   name: 'mutation',
 
-  inserted (el, binding) {
-    const ctx = {}
-    update(el, ctx, binding)
+  inserted (el, { modifiers: { once, ...mod }, value }) {
+    if (el.__qmutation !== void 0) {
+      destroy(el)
+      el.__qmutation_destroyed = true
+    }
+
+    const ctx = {
+      once,
+      opts: Object.keys(mod).length === 0
+        ? defaultCfg
+        : mod
+    }
+
+    update(el, ctx, value)
+
     el.__qmutation = ctx
   },
 
-  update (el, binding) {
+  update (el, { oldValue, value }) {
     const ctx = el.__qmutation
-    ctx !== void 0 && update(el, ctx, binding)
+    if (ctx !== void 0 && oldValue !== value) {
+      update(el, ctx, value)
+    }
   },
 
-  unbind: destroy
+  unbind (el) {
+    if (el.__qmutation_destroyed === void 0) {
+      destroy(el)
+    }
+    else {
+      delete el.__qmutation_destroyed
+    }
+  }
 }
diff --git a/ui/src/directives/Ripple.js b/ui/src/directives/Ripple.js
index 43663818195..8c51f3986d0 100644
--- a/ui/src/directives/Ripple.js
+++ b/ui/src/directives/Ripple.js
@@ -61,18 +61,23 @@ function showRipple (evt, el, ctx, forceCenter) {
   }, 50)
 }
 
-function updateCtx (ctx, { value, modifiers, arg }) {
-  ctx.enabled = value !== false
-
-  if (ctx.enabled === true) {
-    const cfg = Object.assign({}, $q.config.ripple, modifiers, value)
-    ctx.modifiers = {
-      early: cfg.early === true,
-      stop: cfg.stop === true,
-      center: cfg.center === true,
-      color: cfg.color || arg,
-      keyCodes: [].concat(cfg.keyCodes || 13)
-    }
+function updateModifiers (ctx, { modifiers, value, arg }) {
+  const cfg = Object.assign({}, $q.config.ripple, modifiers, value)
+  ctx.modifiers = {
+    early: cfg.early === true,
+    stop: cfg.stop === true,
+    center: cfg.center === true,
+    color: cfg.color || arg,
+    keyCodes: [].concat(cfg.keyCodes || 13)
+  }
+}
+
+function destroy (el) {
+  const ctx = el.__qripple
+  if (ctx !== void 0) {
+    ctx.abort.forEach(fn => { fn() })
+    cleanEvt(ctx, 'main')
+    delete el._qripple
   }
 }
 
@@ -80,7 +85,13 @@ export default {
   name: 'ripple',
 
   inserted (el, binding) {
+    if (el.__qripple !== void 0) {
+      destroy(el)
+      el.__qripple_destroyed = true
+    }
+
     const ctx = {
+      enabled: binding.value !== false,
       modifiers: {},
       abort: [],
 
@@ -112,11 +123,7 @@ export default {
       }, 300)
     }
 
-    updateCtx(ctx, binding)
-
-    if (el.__qripple) {
-      el.__qripple_old = el.__qripple
-    }
+    updateModifiers(ctx, binding)
 
     el.__qripple = ctx
 
@@ -130,15 +137,22 @@ export default {
   },
 
   update (el, binding) {
-    el.__qripple !== void 0 && updateCtx(el.__qripple, binding)
+    const ctx = el.__qripple
+    if (ctx !== void 0 && binding.oldValue !== binding.value) {
+      ctx.enabled = binding.value !== false
+
+      if (ctx.enabled === true && Object(binding.value) === binding.value) {
+        updateModifiers(ctx, binding)
+      }
+    }
   },
 
   unbind (el) {
-    const ctx = el.__qripple_old || el.__qripple
-    if (ctx !== void 0) {
-      ctx.abort.forEach(fn => { fn() })
-      cleanEvt(ctx, 'main')
-      delete el[el.__qripple_old ? '__qripple_old' : '__qripple']
+    if (el.__qripple_destroyed === void 0) {
+      destroy(el)
+    }
+    else {
+      delete el.__qripple_destroyed
     }
   }
 }
diff --git a/ui/src/directives/Scroll.js b/ui/src/directives/Scroll.js
index 2c289dccbb0..62e7ff03321 100644
--- a/ui/src/directives/Scroll.js
+++ b/ui/src/directives/Scroll.js
@@ -1,7 +1,7 @@
 import { getScrollPosition, getScrollTarget, getHorizontalScrollPosition } from '../utils/scroll.js'
 import { listenOpts } from '../utils/event.js'
 
-function updateBinding (ctx, { value, oldValue }) {
+function update (ctx, { value, oldValue }) {
   if (typeof value !== 'function') {
     ctx.scrollTarget.removeEventListener('scroll', ctx.scroll, listenOpts.passive)
     return
@@ -13,11 +13,25 @@ function updateBinding (ctx, { value, oldValue }) {
   }
 }
 
+function destroy (el) {
+  const ctx = el.__qscroll
+  if (ctx !== void 0) {
+    ctx.scrollTarget.removeEventListener('scroll', ctx.scroll, listenOpts.passive)
+    delete el.__qscroll
+  }
+}
+
 export default {
   name: 'scroll',
 
-  bind (el) {
+  inserted (el, binding) {
+    if (el.__qscroll !== void 0) {
+      destroy(el)
+      el.__qscroll_destroyed = true
+    }
+
     const ctx = {
+      scrollTarget: getScrollTarget(el),
       scroll () {
         ctx.handler(
           getScrollPosition(ctx.scrollTarget),
@@ -26,30 +40,23 @@ export default {
       }
     }
 
-    if (el.__qscroll) {
-      el.__qscroll_old = el.__qscroll
-    }
+    update(ctx, binding)
 
     el.__qscroll = ctx
   },
 
-  inserted (el, binding) {
-    const ctx = el.__qscroll
-    ctx.scrollTarget = getScrollTarget(el)
-    updateBinding(ctx, binding)
-  },
-
   update (el, binding) {
     if (el.__qscroll !== void 0 && binding.oldValue !== binding.value) {
-      updateBinding(el.__qscroll, binding)
+      update(el.__qscroll, binding)
     }
   },
 
   unbind (el) {
-    const ctx = el.__qscroll_old || el.__qscroll
-    if (ctx !== void 0) {
-      ctx.scrollTarget.removeEventListener('scroll', ctx.scroll, listenOpts.passive)
-      delete el[el.__qscroll_old ? '__qscroll_old' : '__qscroll']
+    if (el.__qscroll_destroyed === void 0) {
+      destroy(el)
+    }
+    else {
+      delete el.__qscroll_destroyed
     }
   }
 }
diff --git a/ui/src/directives/ScrollFire.js b/ui/src/directives/ScrollFire.js
index 357e0abd1b0..c33ac7b42dc 100644
--- a/ui/src/directives/ScrollFire.js
+++ b/ui/src/directives/ScrollFire.js
@@ -3,7 +3,7 @@ import { height, offset } from '../utils/dom.js'
 import { getScrollTarget } from '../utils/scroll.js'
 import { listenOpts } from '../utils/event.js'
 
-function updateBinding (ctx, { value, oldValue }) {
+function update (ctx, { value, oldValue }) {
   if (typeof value !== 'function') {
     ctx.scrollTarget.removeEventListener('scroll', ctx.scroll)
     return
@@ -16,11 +16,25 @@ function updateBinding (ctx, { value, oldValue }) {
   }
 }
 
+function destroy (el) {
+  const ctx = el.__qscrollfire
+  if (ctx !== void 0) {
+    ctx.scrollTarget.removeEventListener('scroll', ctx.scroll, listenOpts.passive)
+    delete el.__qscrollfire
+  }
+}
+
 export default {
   name: 'scroll-fire',
 
-  bind (el) {
+  inserted (el, binding) {
+    if (el.__qscrollfire !== void 0) {
+      destroy(el)
+      el.__qscrollfire_destroyed = true
+    }
+
     const ctx = {
+      scrollTarget: getScrollTarget(el),
       scroll: debounce(() => {
         let containerBottom, elBottom
 
@@ -40,30 +54,23 @@ export default {
       }, 25)
     }
 
-    if (el.__qscrollfire) {
-      el.__qscrollfire_old = el.__qscrollfire
-    }
+    update(ctx, binding)
 
     el.__qscrollfire = ctx
   },
 
-  inserted (el, binding) {
-    const ctx = el.__qscrollfire
-    ctx.scrollTarget = getScrollTarget(el)
-    updateBinding(ctx, binding)
-  },
-
   update (el, binding) {
     if (el.__qscrollfire !== void 0 && binding.value !== binding.oldValue) {
-      updateBinding(el.__qscrollfire, binding)
+      update(el.__qscrollfire, binding)
     }
   },
 
   unbind (el) {
-    const ctx = el.__qscrollfire_old || el.__qscrollfire
-    if (ctx !== void 0) {
-      ctx.scrollTarget.removeEventListener('scroll', ctx.scroll, listenOpts.passive)
-      delete el[el.__qscrollfire_old ? '__qscrollfire_old' : '__qscrollfire']
+    if (el.__qscrollfire_destroyed === void 0) {
+      destroy(el)
+    }
+    else {
+      delete el.__qscrollfire_destroyed
     }
   }
 }
diff --git a/ui/src/directives/TouchHold.js b/ui/src/directives/TouchHold.js
index cbc01335820..ac282f5c825 100644
--- a/ui/src/directives/TouchHold.js
+++ b/ui/src/directives/TouchHold.js
@@ -3,26 +3,16 @@ import { getTouchTarget } from '../utils/touch.js'
 import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, noop } from '../utils/event.js'
 import { clearSelection } from '../utils/selection.js'
 
-function update (el, binding) {
+function destroy (el) {
   const ctx = el.__qtouchhold
-
   if (ctx !== void 0) {
-    if (binding.oldValue !== binding.value) {
-      typeof binding.value !== 'function' && ctx.end()
-      ctx.handler = binding.value
-    }
+    cleanEvt(ctx, 'main')
+    cleanEvt(ctx, 'temp')
 
-    // duration in ms, touch in pixels, mouse in pixels
-    const data = [600, 5, 7]
-
-    if (typeof binding.arg === 'string' && binding.arg.length) {
-      binding.arg.split(':').forEach((val, index) => {
-        const v = parseInt(val, 10)
-        v && (data[index] = v)
-      })
-    }
+    clearTimeout(ctx.timer)
+    ctx.styleCleanup !== void 0 && ctx.styleCleanup()
 
-    [ ctx.duration, ctx.touchSensitivity, ctx.mouseSensitivity ] = data
+    delete el.__qtouchhold
   }
 }
 
@@ -30,6 +20,11 @@ export default {
   name: 'touch-hold',
 
   bind (el, binding) {
+    if (el.__qtouchhold !== void 0) {
+      destroy(el)
+      el.__qtouchhold_destroyed = true
+    }
+
     const { modifiers } = binding
 
     // early return, we don't need to do anything
@@ -38,6 +33,7 @@ export default {
     }
 
     const ctx = {
+      handler: binding.value,
       noop,
 
       mouseStart (evt) {
@@ -130,13 +126,19 @@ export default {
       }
     }
 
-    if (el.__qtouchhold) {
-      el.__qtouchhold_old = el.__qtouchhold
+    // duration in ms, touch in pixels, mouse in pixels
+    const data = [600, 5, 7]
+
+    if (typeof binding.arg === 'string' && binding.arg.length > 0) {
+      binding.arg.split(':').forEach((val, index) => {
+        const v = parseInt(val, 10)
+        v && (data[index] = v)
+      })
     }
 
-    el.__qtouchhold = ctx
+    [ ctx.duration, ctx.touchSensitivity, ctx.mouseSensitivity ] = data
 
-    update(el, binding)
+    el.__qtouchhold = ctx
 
     modifiers.mouse === true && addEvt(ctx, 'main', [
       [ el, 'mousedown', 'mouseStart', `passive${modifiers.mouseCapture === true ? 'Capture' : ''}` ]
@@ -148,18 +150,20 @@ export default {
     ])
   },
 
-  update,
+  update (el, binding) {
+    const ctx = el.__qtouchhold
+    if (ctx !== void 0 && binding.oldValue !== binding.value) {
+      typeof binding.value !== 'function' && ctx.end()
+      ctx.handler = binding.value
+    }
+  },
 
   unbind (el) {
-    const ctx = el.__qtouchhold_old || el.__qtouchhold
-    if (ctx !== void 0) {
-      cleanEvt(ctx, 'main')
-      cleanEvt(ctx, 'temp')
-
-      clearTimeout(ctx.timer)
-      ctx.styleCleanup !== void 0 && ctx.styleCleanup()
-
-      delete el[el.__qtouchhold_old ? '__qtouchhold_old' : '__qtouchhold']
+    if (el.__qtouchhold_destroyed === void 0) {
+      destroy(el)
+    }
+    else {
+      delete el.__qtouchhold_destroyed
     }
   }
 }
diff --git a/ui/src/directives/TouchPan.js b/ui/src/directives/TouchPan.js
index 4e1834cb583..9b1fbc745cd 100644
--- a/ui/src/directives/TouchPan.js
+++ b/ui/src/directives/TouchPan.js
@@ -1,5 +1,5 @@
 import { client } from '../plugins/Platform.js'
-import { getModifierDirections, updateModifiers, getTouchTarget, shouldStart } from '../utils/touch.js'
+import { getModifierDirections, getTouchTarget, shouldStart } from '../utils/touch.js'
 import { addEvt, cleanEvt, position, leftClick, prevent, stop, stopAndPrevent, preventDraggable, noop } from '../utils/event.js'
 import { clearSelection } from '../utils/selection.js'
 
@@ -114,12 +114,35 @@ function getChanges (evt, ctx, isFinal) {
   }
 }
 
+function destroy (el) {
+  const ctx = el.__qtouchpan
+  if (ctx !== void 0) {
+    // emit the end event when the directive is destroyed while active
+    // this is only needed in TouchPan because the rest of the touch directives do not emit an end event
+    // the condition is also checked in the start of function but we avoid the call
+    ctx.event !== void 0 && ctx.end()
+
+    cleanEvt(ctx, 'main')
+    cleanEvt(ctx, 'temp')
+
+    client.is.firefox === true && preventDraggable(el, false)
+    ctx.styleCleanup !== void 0 && ctx.styleCleanup()
+
+    delete el.__qtouchpan
+  }
+}
+
 let uid = 0
 
 export default {
   name: 'touch-pan',
 
   bind (el, { value, modifiers }) {
+    if (el.__qtouchpan !== void 0) {
+      destroy(el)
+      el.__qtouchpan_destroyed = true
+    }
+
     // early return, we don't need to do anything
     if (modifiers.mouse !== true && client.has.touch !== true) {
       return
@@ -357,10 +380,6 @@ export default {
       }
     }
 
-    if (el.__qtouchpan) {
-      el.__qtouchpan_old = el.__qtouchpan
-    }
-
     el.__qtouchpan = ctx
 
     modifiers.mouse === true && addEvt(ctx, 'main', [
@@ -373,26 +392,20 @@ export default {
     ])
   },
 
-  update (el, binding) {
-    el.__qtouchpan !== void 0 && updateModifiers(el.__qtouchpan, binding)
+  update (el, { oldValue, value }) {
+    const ctx = el.__qtouchpan
+    if (ctx !== void 0 && oldValue !== value) {
+      typeof value !== 'function' && ctx.end()
+      ctx.handler = value
+    }
   },
 
   unbind (el) {
-    const ctx = el.__qtouchpan_old || el.__qtouchpan
-
-    if (ctx !== void 0) {
-      // emit the end event when the directive is destroyed while active
-      // this is only needed in TouchPan because the rest of the touch directives do not emit an end event
-      // the condition is also checked in the start of function but we avoid the call
-      ctx.event !== void 0 && ctx.end()
-
-      cleanEvt(ctx, 'main')
-      cleanEvt(ctx, 'temp')
-
-      client.is.firefox === true && preventDraggable(el, false)
-      ctx.styleCleanup !== void 0 && ctx.styleCleanup()
-
-      delete el[el.__qtouchpan_old ? '__qtouchpan_old' : '__qtouchpan']
+    if (el.__qtouchpan_destroyed === void 0) {
+      destroy(el)
+    }
+    else {
+      delete el.__qtouchpan_destroyed
     }
   }
 }
diff --git a/ui/src/directives/TouchRepeat.js b/ui/src/directives/TouchRepeat.js
index 7ca32b9101d..32165357c0b 100644
--- a/ui/src/directives/TouchRepeat.js
+++ b/ui/src/directives/TouchRepeat.js
@@ -25,10 +25,29 @@ function shouldEnd (evt, origin) {
     Math.abs(top - origin.top) >= 7
 }
 
+function destroy (el) {
+  const ctx = el.__qtouchrepeat
+  if (ctx !== void 0) {
+    clearTimeout(ctx.timer)
+
+    cleanEvt(ctx, 'main')
+    cleanEvt(ctx, 'temp')
+
+    ctx.styleCleanup !== void 0 && ctx.styleCleanup()
+
+    delete el.__qtouchrepeat
+  }
+}
+
 export default {
   name: 'touch-repeat',
 
   bind (el, { modifiers, value, arg }) {
+    if (el.__qtouchrepeat !== void 0) {
+      destroy(el)
+      el.__qtouchrepeat_destroyed = true
+    }
+
     const keyboard = Object.keys(modifiers).reduce((acc, key) => {
       if (keyRegex.test(key) === true) {
         const keyCode = isNaN(parseInt(key, 10)) ? keyCodes[key.toLowerCase()] : parseInt(key, 10)
@@ -197,10 +216,6 @@ export default {
       }
     }
 
-    if (el.__qtouchrepeat !== void 0) {
-      el.__qtouchrepeat_old = el.__qtouchrepeat
-    }
-
     el.__qtouchrepeat = ctx
 
     modifiers.mouse === true && addEvt(ctx, 'main', [
@@ -217,27 +232,20 @@ export default {
     ])
   },
 
-  update (el, binding) {
+  update (el, { oldValue, value }) {
     const ctx = el.__qtouchrepeat
-
-    if (ctx !== void 0 && binding.oldValue !== binding.value) {
-      typeof binding.value !== 'function' && ctx.end()
-      ctx.handler = binding.value
+    if (ctx !== void 0 && oldValue !== value) {
+      typeof value !== 'function' && ctx.end()
+      ctx.handler = value
     }
   },
 
   unbind (el) {
-    const ctx = el.__qtouchrepeat_old || el.__qtouchrepeat
-
-    if (ctx !== void 0) {
-      clearTimeout(ctx.timer)
-
-      cleanEvt(ctx, 'main')
-      cleanEvt(ctx, 'temp')
-
-      ctx.styleCleanup !== void 0 && ctx.styleCleanup()
-
-      delete el[el.__qtouchrepeat_old ? '__qtouchrepeat_old' : '__qtouchrepeat']
+    if (el.__qtouchrepeat_destroyed === void 0) {
+      destroy(el)
+    }
+    else {
+      delete el.__qtouchrepeat_destroyed
     }
   }
 }
diff --git a/ui/src/directives/TouchSwipe.js b/ui/src/directives/TouchSwipe.js
index bb4a5ff07bc..8d58cc707be 100644
--- a/ui/src/directives/TouchSwipe.js
+++ b/ui/src/directives/TouchSwipe.js
@@ -1,5 +1,5 @@
 import { client } from '../plugins/Platform.js'
-import { getModifierDirections, updateModifiers, getTouchTarget, shouldStart } from '../utils/touch.js'
+import { getModifierDirections, getTouchTarget, shouldStart } from '../utils/touch.js'
 import { addEvt, cleanEvt, position, leftClick, stopAndPrevent, preventDraggable, noop } from '../utils/event.js'
 import { clearSelection } from '../utils/selection.js'
 
@@ -19,10 +19,29 @@ function parseArg (arg) {
   return data
 }
 
+function destroy (el) {
+  const ctx = el.__qtouchswipe
+
+  if (ctx !== void 0) {
+    cleanEvt(ctx, 'main')
+    cleanEvt(ctx, 'temp')
+
+    client.is.firefox === true && preventDraggable(el, false)
+    ctx.styleCleanup !== void 0 && ctx.styleCleanup()
+
+    delete el.__qtouchswipe
+  }
+}
+
 export default {
   name: 'touch-swipe',
 
   bind (el, { value, arg, modifiers }) {
+    if (el.__qtouchswipe !== void 0) {
+      destroy(el)
+      el.__qtouchswipe_destroyed = true
+    }
+
     // early return, we don't need to do anything
     if (modifiers.mouse !== true && client.has.touch !== true) {
       return
@@ -223,10 +242,6 @@ export default {
       }
     }
 
-    if (el.__qtouchswipe) {
-      el.__qtouchswipe_old = el.__qtouchswipe
-    }
-
     el.__qtouchswipe = ctx
 
     modifiers.mouse === true && addEvt(ctx, 'main', [
@@ -239,21 +254,20 @@ export default {
     ])
   },
 
-  update (el, binding) {
-    el.__qtouchswipe !== void 0 && updateModifiers(el.__qtouchswipe, binding)
+  update (el, { oldValue, value }) {
+    const ctx = el.__qtouchswipe
+    if (ctx !== void 0 && oldValue !== value) {
+      typeof value !== 'function' && ctx.end()
+      ctx.handler = value
+    }
   },
 
   unbind (el) {
-    const ctx = el.__qtouchswipe_old || el.__qtouchswipe
-
-    if (ctx !== void 0) {
-      cleanEvt(ctx, 'main')
-      cleanEvt(ctx, 'temp')
-
-      client.is.firefox === true && preventDraggable(el, false)
-      ctx.styleCleanup !== void 0 && ctx.styleCleanup()
-
-      delete el[el.__qtouchswipe_old ? '__qtouchswipe_old' : '__qtouchswipe']
+    if (el.__qtouchswipe_destroyed === void 0) {
+      destroy(el)
+    }
+    else {
+      delete el.__qtouchswipe_destroyed
     }
   }
 }
diff --git a/ui/src/utils/touch.js b/ui/src/utils/touch.js
index 17863ad1c90..2a0ca6f8f7a 100644
--- a/ui/src/utils/touch.js
+++ b/ui/src/utils/touch.js
@@ -44,21 +44,6 @@ export function getModifierDirections (mod) {
   return dir
 }
 
-export function updateModifiers (ctx, { oldValue, value, modifiers }) {
-  if (oldValue !== value) {
-    typeof value !== 'function' && ctx.end()
-    ctx.handler = value
-  }
-
-  if (
-    ctx.modifiers.mouseAllDir !== modifiers.mouseAllDir ||
-    directions.some(direction => modifiers[direction] !== ctx.modifiers[direction])
-  ) {
-    ctx.modifiers = modifiers
-    ctx.direction = getModifierDirections(modifiers)
-  }
-}
-
 export const getTouchTarget = isSSR === false && iosEmulated !== true && (
   client.is.ios === true ||
   window.navigator.vendor.toLowerCase().indexOf('apple') > -1