Cannot customize using Vuetify

[chris-canipe]

This sandbox has a basic set up, sans styles, that works.

However, as soon as I try to use Vuetify it breaks. In this example I have the changed the group's root template from <div> to <v-card> and it yields TypeError: _vm.$parent.ruleById is not a function when I try to add a rule or group.

https://codesandbox.io/s/vuequerybuilder-vuetify-i5onh

[level09]

Got around this by adding some styles to override Vuetify :

`.vue-query-builder {
padding: 5px;
}

.vue-query-builder label {
margin: 5px;
}
.vue-query-builder .form-group {
margin: 2px 0;
}
.vue-query-builder select {
height: 32px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #d1d1d1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
-webkit-appearance: menulist;
margin: 5px;
display: inline-block;
}

.vue-query-builder button[type="button"] {
display: inline-block;
height: 32px;
padding: 0 20px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 32px;
letter-spacing: 0.1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
margin: 2px;
}
.vue-query-builder button[type="button"]:hover {
color: #333;
border-color: #888;
outline: 0;
}

.vue-query-builder input[type=text] {
height: 38px;
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
}

.vue-query-builder button.pull-right {
font-size:18px;
}

.vue-query-builder .children {
padding: 20px;
}`