I am reworking an old app of mine and I am having issues with dom manipulation and basic selections within a vue instance.

Essentially I have information in a database that I load in via ajax.
Each record in the db has 2 sections. The header tab(title, time, date etc) and the body of the record(notes, ideas, etc)

When loaded, the header shows normally to the user but if they want to see what that note contains, they have to click on the header for the bottom to appear.

consider the following html:

```
<vuejs for loop>
    <div v-bind:id='item._id' class="tabW" v-on:click="blueTabClick"  >
        <div class="blueTabMainColor">
            <!-- header stuff here -->
        </div>

         <div class="notesOpenedW">
            <!-- interior informaton here, HIDDEN BY CSS -->
        </div>                         
    </div>
<vuejs for loop ender>

```

This HTML is essentially inside a Vue for/loop directive, and generates however many "tabs(tabW)" as needed based on how much info I have in the DB

All I want the user to do is to be able to click whichever tab(tabW) they want information on, and for the notes show underneath(notesOpenedW).

I stripped my entire app and js and tried to keep it as simple a test as possible and even with the below, I still can't get anything.
here is my JS(JQ):

```
 $(document).ready(function(evt){
    $(".blueTabMainColor").click(function(){
        $(this).next(".notesOpenedW").fadeToggle();
    });
 });

```

With this basic code, when I put it inside a Vue instance, via:

```
methods: {

    blueTabClick: function (evt) {
        evt.preventDefault();

        $(".blueTabMainColor").click(function(){
            //alert("you clicked me");
            $(this).next(".notesOpenedW").fadeToggle();
        });
    }
}

```

It doesn't work, but if I take it out of the Vue instance, it works just fine.

how can I get this to work? or am I going about it the wrong way?