I have some subdomains that go to my home address (I know I should put it through a VPS first but I’ll get to that when I have time).
If I connect to example.domain.tld and DNS records point back to my own IP, where does that data go to reach back to my device?


Your diagram is almost right, but I think it will help to understand more of the details. It’s important to understand the difference between DNS (domain name lookup) and IP routing.
To break your diagram down more, this is what happens when any computer looks up your website:
GET / HTTP/1.1 Host: example.com ...lots more headers... <blank line>That’s all very simplified, of course.
As others pointed out, things may seem to work differently from the “inside”, if hairpinning is not available or enabled. This is not related to DNS, but to IP routing. The firewall doing NAT can get confused and not know what to do when an internal request goes to an external IP that it itself has. When it turns that around and routes it back to the internal network, that’s called hairpinning.
One “fix” for this, often used in enterprises, is to use so-called split DNS. All that means is that if you’re asking your internal DNS server for an internal name, it will give you the internal address (192.168.1.123 for example), but an external client would get an external IP.
TL;DR: DNS and IP routing are separate concerns and happen at different parts of the TCP/IP stack.