Webstorm and Vue - Inconsistent 'XML has empty body' warnings.

After updating Webstorm to 2017.3.4, my Vue component files are full of yellow highlighted sections with warnings about 'XML has empty body', since this is pretty common using single file components. I am prompted to 'collapse empty tag'. 

However, if I collapse the empty tags, and then copy-paste the component into a different file (since reusability is the whole point), or if I write a component reference as a collapsed tag to avoid the warning in the first place, I get a new yellow highlight and warning that empty tags are not supported in all browsers. 

So which is it? Should I be using the collapsed tags or not? Personally I'd prefer not to. I'd rather stick with the more verbose, but clear version, in which case, how do I get Webstorm to stop warning be about empty XML body since it's not a problem, and is common practice with single file Vue components? 

Any tips would be appreciated.