title: VueJS not building due to Android Javascript webView callback
body: <p>I would like to have a WebView page callback to my Android app. I have successfully done this using vanilla HTML page. When I add the same JavaScript code to my VueJS app, it does not want to build, and gives me an <code>ELIFECYCLE</code> error.</p>
  <p>In my Kotlin code, I have the following:</p>
  <pre><code>binding.webView.addJavascriptInterface(JavaScriptInterface(), &quot;Android&quot;)
  
  private inner class JavaScriptInterface {
    fun showWallet(string: String) {
      AppPreference.PREFERENCE_SCREEN_TYPE = Constants.SCREEN_USER_DASHBOARD
      mainActivity.getNavController().navigate(R.id.action_placeOrder_to_userDashboardFragment)
     }
  }
  </code></pre>
  <p><code>Android</code> is my JavaScript object I've declared, and the function is <code>showWallet</code>, which navigates the user to another fragment.</p>
  <p>In my VueJS code, I have the following:</p>
  <pre><code>let devicedUsed = this.$store.state.devicedUsed;
  if (devicedUsed === 'apple'){
    window.webkit.messageHandlers.message.postMessage('backToWallet');
  }else{ //is Android device
    Android.showWallet('backToWallet');
  }
  </code></pre>
  <p>The above callback works without any issues in vanilla HTML. My problem is the above code does not build, and I get an error that <code>Android</code> is not defined. It seems VueJS is looking for <code>Android</code>, which is only defined in the Kotlin code.</p>
  <p>How do I get around this problem?</p>