1) On what design pattern Vue is based on?

Vue.js is based on Model-View-ViewModel(aka as MVVM) design pattern, main motivation for this pattern is a separation model from view.

2) How to pass data to component?

There is two ways: using props or through events.
<my-awesome-component some-prop="value"></my-awesome-component>

When you need to pass data after some specific event you should use dispatchers and broadcasters.
<parent-component>
    <some-child></some-child>
    <another-child></another-child></parent-component>

To dispatch event from two child components use following syntax
this.$dispatch('something_happen', data);// Event listenerevents: {
    'something_happen' : function(data){
        // Handle event
    },}

3) What component lifecycle hooks in Vue.js?

beforeCreate, created, beforeMount, mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed,errorCaptured

4) How to update component state in Vue ?

To add or update reactive property in state use method Vue.set(object, key, value), you can call it using this.
this.$set(this.user, 'first_name', 'John')

5) What is computed properties and when to use them ?

Computed properties is a functions which returns somehow changed simple properties, for example, you have some text property and you need to show it in uppercase mode, so instead storing two props with original and uppercased text, you just write function which computes needed value based on original property.
<div id="root">
  <p>Original message: "{{ someMessage }}"</p>
  <p>Message in uppercase : "{{ uppercasedMessage }}"</p></div>var vm = new Vue({
  el: '#root',
  data: {
    someMessage: 'Hello world!'
  },
  computed: {
    // computed property getter
    uppercasedMessage: function () {
      return this.message.toUpperCase()
    }
  }})
6) How to import external css file into Vue ?

If you are using webpack use following syntax:
<style>
  @import './assets/styles/bootstrap.css';
</style>

If you prefer old-school style just <style> tag.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

7) How use jQuery plugin ?

Generally it's not recommended practise to use jQuery plugin in Vue applications, however if there is no such suitable components & libraries, you can use it. First of all import jQuery and plugin.
import $ from 'jquery'import TextEditor from 'TextEditor'

Then you need initialize plugin in mounted component lifecycle hook.
import $ from 'jquery'import TextEditor from 'TextEditor'
export default class MyComponent extends Vue {
 mounted(){ $(componentId).textEditor({ rows:20, cols:10 }); 
}
 }

8) How register component in Vue.js ?

To register component globally use following syntax.
Vue.component('my-awesome-component', { /* ... some options */ })

First argument is name of your new component

To register component locally use components during creation new Vue instance.
new Vue({
  el: '#app'
  components: {
    'header': Header,
    'footer': Footer
  }})

9) What is Vuex ?

Vuex is a state management pattern and library for Vue.js apps. It designed to be main data storage for all app components and guarantee predictability of reactive data changes.

10) How to conditionally render component?

Use v-if and v-else directives, component will be removed from DOM if you pass false condition to it. To save element in DOM v-show directive can be used, it changes display CSS property
<p v-if="true">Visible</p><p v-else>Not visible</p>

11)Does Vue.js support data binding? If yes how to use it?

Yes Vue.js supports data binding, to bind input and state v-model directive should be used.
<input v-model="name" placeholder="What is your name?"><p>Hello, {{ name }}!</p>

12) How to implement client side routing in Vue?

Recommended way to make SPA is to use Vue Router, which is official library for routing, but not include in core framework.

13) How to redirect programmatically in Vue Router?

To redirect programmatically use router.push(location, onComplete?, onAbort?)
logOut () {
    userService.removeCurrentSession();
    this.$router.push('/login');}

Also it's possible go back to some point in history stack using router.go(n) method

14) How to protect some route from unauthorized access?

It's can be done inside component or in global guards.
const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {
  if(to.isProtected() && !haveAccess(user)){
    next(false)
  }
  next()})