🐛 bug(directive): fix cannot locale reactivity

Closes #227

src/directive.js

@@ -3,32 +3,45 @@
 import { warn, isPlainObject, looseEqual } from './util'
 
 export function bind (el: any, binding: Object, vnode: any): void {
+  if (!assert(el, vnode)) { return }
+
   t(el, binding, vnode)
 }
 
 export function update (el: any, binding: Object, vnode: any, oldVNode: any): void {
-  if (looseEqual(binding.value, binding.oldValue)) { return }
+  if (!assert(el, vnode)) { return }
+
+  if (localeEqual(el, vnode) && looseEqual(binding.value, binding.oldValue)) { return }
 
   t(el, binding, vnode)
 }
 
-function t (el: any, binding: Object, vnode: any): void {
-  const value: any = binding.value
-
-  const { path, locale, args } = parseValue(value)
-  if (!path && !locale && !args) {
-    warn('not support value type')
-    return
-  }
-
+function assert (el: any, vnode: any): boolean {
   const vm: any = vnode.context
   if (!vm) {
     warn('not exist Vue instance in VNode context')
-    return
+    return false
   }
 
   if (!vm.$i18n) {
     warn('not exist VueI18n instance in Vue instance')
+    return false
+  }
+
+  return true
+}
+
+function localeEqual (el: any, vnode: any): boolean {
+  const vm: any = vnode.context
+  return el._locale === vm.$i18n.locale
+}
+
+function t (el: any, binding: Object, vnode: any): void {
+  const value: any = binding.value
+
+  const { path, locale, args } = parseValue(value)
+  if (!path && !locale && !args) {
+    warn('not support value type')
     return
   }
 
@@ -37,7 +50,9 @@ function t (el: any, binding: Object, vnode: any): void {
     return
   }
 
+  const vm: any = vnode.context
   el._vt = el.textContent = vm.$i18n.t(path, ...makeParams(locale, args))
+  el._locale = vm.$i18n.locale
 }
 
 function parseValue (value: any): Object {

test/unit/directive.test.js

@@ -65,6 +65,39 @@ describe('custom directive', () => {
       })
     })
 
+    describe('locale reactivity', () => {
+      it('should be translated', done => {
+        let expected = ''
+        const vm = createVM({
+          i18n,
+          data: {
+            msgPath: 'message.format.named'
+          },
+          render (h) {
+            // <p ref="text" v-t="{ path: msgPath, args: { name: 'kazupon' } }"></p>
+            return h('p', { ref: 'text', directives: [{
+              name: 't', rawName: 'v-t',
+              value: ({ path: this.msgPath, args: { name: 'kazupon' } }),
+              expression: "{ path: msgPath, args: { name: 'kazupon' } }"
+            }] })
+          }
+        })
+        nextTick(() => {
+          expected = 'Hello kazupon, how are you?'
+          assert.equal(vm.$refs.text.textContent, expected)
+          assert.equal(vm.$refs.text._vt, expected)
+          assert.equal(vm.$refs.text._locale, 'en')
+          vm.$i18n.locale = 'ja' // change locale
+          vm.$forceUpdate()
+        }).then(() => {
+          expected = 'こんにちは kazupon, ごきげんいかが？'
+          assert.equal(vm.$refs.text.textContent, expected)
+          assert.equal(vm.$refs.text._vt, expected)
+          assert.equal(vm.$refs.text._locale, 'ja')
+        }).then(done)
+      })
+    })
+
     describe('not support warning', () => {
       it('should be warned', done => {
         const spy = sinon.spy(console, 'warn')