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; }`