Vue instance inside Vue instance

The problem is that you have two vue instances nested to each other. If the elements are nested, then you should use the same instance or try components

https://jsfiddle.net/p16y2g16/1/

// componentTwo.js
var item = Vue.component('item',({
  name:'item',
    template:'<button @click="doSomething($event)">{{ message2 }</button>',
    data: function(){
      return{ 
        message2: 'ddddddddddd!'
    }},
  methods: {
    doSomething: function(event) {alert('s')}
  }
}));

var app = new Vue({
  el: '[data-init="component-one"]',
  data: {
    message: 'Hello Vue!'
  }
});

<div data-init="component-one">
  <button >{{ message }}</button>
  <item></item>
</div>

Separate instances work if they are independant of each other. as follows:

https://jsfiddle.net/p16y2g16/

var app = new Vue({
  el: '[data-init="component-one"]',
  data: {
    message: 'Hello Vue!'
  }
});

// componentTwo.js
var ddd = new Vue({
  el: '[data-init="component-two"]',
    data: {
      message: 'ddddddddddd!'
    },
  methods: {
    doSomething: function(event) {alert('s')}
  } 
});

But when I do some inline stuff, like {{ 3 + 3 }}, it gets computed like it should. So Vue knows there is something.

Because you have parent instance 'componentOne'. It activated Vue for this template. If you need to set another instance inside, you have to separate part of template. Example (it can lag in snippet!) . Alternative

https://jsfiddle.net/qh8a8ebg/2/

// componentOne.js
new Vue({
  el: '[data-init="component-one"]',
  data: {
  	text: 'first'
  },
  methods: {}
});


// componentTwo.js
new Vue({
  el: '[data-init="component-two"]',
  data: {
  	text: 'second'
  },
  template: `<button @click="doSomething($event)">{{text}}</button>`,
  methods: {
    doSomething: function(event) {
    	console.log(event);
    }
  }
});

<script src="https://vuejs.org/js/vue.min.js"></script>
<div data-init="component-one">
{{text}}
</div>
 <div data-init="component-two">
 </div>

The button element inside component-two is referenced as a slot in Vue. The evaluation of the @click directive value happens in the parent component (component-one, which host component-two). Therefor, you need to declare the click handler over there (over component-one).

If you want the handler to be handled inside component-two, you should declare a click directive for the slot element in it's (component-two) template, and pass the handler function, for instance, as a pop.

good luck.

You're doing everything right except you've nested the 2nd Vue instance inside the 1st. Just put it to the side and it will work as expected.

Vue ignores binding more than once to the same element to avoid infinite loops, which is the only reason it doesn't work nested.

Use vue-cli to create a webpack starter app. vue init app --webpack

Then, try to structure your components this way. Read more: https://v2.vuejs.org/v2/guide/components.html#What-are-Components

1. This is main.js

import Vue from 'vue'
import ComponentOne from './ComponentOne.vue'
import ComponentTwo from './ComponentTwo.vue'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { 
    ComponentOne,
    ComponentTwo
  }
})

2. This is ComponentOne.vue

<template>
  <div class="user">
    <div v-for="user in users">
      <p>Username: {{ user.username }}</p>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      users: [
        {username: 'Bryan'},
        {username: 'Gwen'},
        {username: 'Gabriel'}
      ]
    }
  }
}
</script>

3. This is ComponentTwo.vue

<template>
  <div class="two">
    Hello World
  </div>
</template>


<script>
export default {

}
</script>

<div th:if="${msg.replyFloor}">
    <div class="msg-lists-item-left">
        <span class="msg-left-edit"
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">您在</span>
        <span th:text="${msg.topic.title}"
              class="msg-left-edit-res"
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">问题回答</span>
        <span th:text="${msg.type.name}"
              class="msg-left-edit "
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">帖子相关</span>
        <span class="msg-left-edit-number" >
            产生了<span th:text="${msg.unreadCount} ? : ${msg.unreadCount} + '条新' : ${msg.unreadCount} + '条' "
                       th:class="${msg.unreadCount} ? : 'number-inner':''">2132条</span>回复
        </span>
    </div>
    <div class="msg-lists-item-right">
        <span th:text="${msg.lastShowTime}">2017-8-10</span>
    </div>
</div>